Kent C. Dodds: 0:00 If you thought that useLayoutEffect was something you weren't going to use a whole lot, wait until you see useImperativeHandle. I want to show it to you, so that you know what it does and when it can be useful because there are use cases for it.

0:12 You are not going to be using this hook very often, and anytime you do, you should probably document exactly why it's necessary because normally it's not.

0:22 In any case, I found a pretty good use case for it in this example. You'll enjoy that. I gave you an example of how we did this with class components. If you've used class components before, maybe that'll be helpful to you.

0:34 Here, I explained the basics of how this useImperativeHandle works. You'll need to learn about React forwardRef as well to use these two things together. I'll give you a little note about why you probably shouldn't be using this very often.

0:48 For our exercise, we are doing the same thing that we had with useLayoutEffect, except now we have a Scroll to top and Scroll to bottom button which in the exercise does not work, but if you look at the final version, this is what they do, scroll to top, scroll to bottom.

1:04 It continues to scroll to the bottom when you add new messages, but you have the option to scroll to the top and scroll to the bottom.

1:10 We have the messages display that you're going to be using and our app is using the API that you're going to expose with the messages display ref. We're forwarding along that ref using that ref prop which might look familiar to you, but we're putting it on this custom component to make all of this stuff work.

1:29 Your job is to update the messages display component, so that it accepts that ref and set some methods onto that ref using useImperativeHandle. Have fun with this and I'll see you on the other side of the exercise.