Instructor: 0:00 Let's finally get a look at this useLayoutEffect hook, which I've referenced a few times. If you recall here, this React Hook Flow Diagram I talked about useLayoutEffect in here. It's hand wavy here.

0:13 This diagram pretty much describes the main difference between these two hooks, so you can take a look at that for sure. I want you to just play around with this. There is literally only one thing you have to do in here.

0:25 Most of the time you're spending on this exercise is playing around with the example and see how making a change actually makes a difference in the output here.

0:34 It's a little bit contrived, but it's totally relevant. The principle that I'll explain to you and that I have written about here in this blog post is something that I think you'll carry with you, and you'll want to use and leverage in your own code.

0:49 Feel free to play around with the simulation of render slowness so you can see what impact using a useLayoutEffect makes in this code.

1:01 Just so you get an understanding of what this example is doing, all that we have here is when you click on add message, we automatically scroll to the bottom here. When you remove a message, then we automatically scroll you to the bottom. That way, we keep the user at the latest message of messages that we have in this little chat box.