00:00 So this exercise, there's not a lot of code change that needs to happen, but there is some conceptual stuff you need to understand. So it's going to be a little bit of work on that end of things, but it should be a pretty quick exercise all altogether. So you might recall the React hook flow diagram

00:18 that we saw earlier, where we have the mount, update and unmount phases of a React component and what runs in each one of these phases. And so I'm going to run you through this again, because now we're going to be talking about React layout effects. So on mount, a component is going to have used states that have lazy initializers, also use reducer with those lazy initializers

00:38 to initialize that state for that component. So that is the first thing that's run. The render is actually run kind of at the same time. And so render finishes and then React looks at the React elements that you created, and it's going to update the DOM to reflect those elements. And then React is going to call any layout effect callbacks that you provide.

00:59 So a layout effect is literally just a use effect, except you have layout in the middle of the word. So as far as the hook, the API, everything is exactly the same as use effect. It's just now it's a layout effect. And so this is the only difference when it runs. A layout effect runs immediately after React updates the DOM

01:19 before the browser has a chance to update what the UI looks like based on that DOM update. This has implications with like lower end devices and measuring where things look. And that's what we're going to be looking at in this exercise. So React runs layout effects. Then it stops doing stuff and says, OK, browser, you're in charge now.

01:40 You can hear the DOM updates I made, like go and do whatever you need to based on those. So the browser paints the screen, updates the the UI so the user can see those updates. And then React will call the regular effects. This is why you typically want to use effects,

01:57 because the more code that you have between the render and actually updating the browser screen, letting the browser do its thing, the slower your app is going to feel. And so you want to have less stuff in here. But there are certainly situations where you need to have something in there. And that's what we're going to be looking at in this exercise.

02:17 So then when the component updates, React is going to call your function again, get all the React elements, and then it's going to compare the last React elements with the new ones, find the difference, and then update the DOM to reflect that. It's going to call your cleanup function for any layout effects that have dependencies that have changed,

02:35 and then run the layout function again for those that have dependencies that have changed. Then the browser will paint, then cleanup of regular effects and running of regular effects will happen. And then on unmount, we clean up layout effects first, and then clean up our effects.

02:52 So, yeah, literally the only difference between a regular use effect and a layout effect, a use layout effect, is that use layout effect all runs before the browser has a chance to respond to the DOM updates that React has made. That's it. That's the only difference.

03:09 But it is significant for what we're going to be looking at, which is a spoiler alert right there. All right, we'll see you in the exercise.