Check out a free preview of the full Intermediate React, v2 course:
The "useLayoutEffect" Lesson is part of the full, Intermediate React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian introduces the useLayoutEffect hook, which allows the user to read layout from the DOM, and synchronously re-render the page.

Get Unlimited Access Now

Transcript from the "useLayoutEffect" Lesson

[00:00:00]
>> Brian: Let's go do useLayoutEffect. This is pretty much only useful if you need to measure something in the DOM, right?. So I have this text area, right, and I can move this, right, and I'm measuring up here what the width and height is.
>> Brian: And I'm just doing that with useLayoutEffect.

[00:00:29]
>> Brian: So what this is doing, it says any time that there's a click here, set the width to 0, which kicks off a re-render, right? And then once that re-render happens then it'll call useLayoutEffect. Which allows me to then go in and render, or measure what the element is, which I'm storing here in a ref, right?

[00:00:51] So notice that this is kinda weird, right? I'm setting width to 0, right, which is not 0, but this kicks off a re-render which then allows me to measure it, right?
>> Brian: So what's interesting about this, they call setwidth(0). This kicks off a re-render, which then schedules a LayoutEffect.

[00:01:10] Which then measures this and then calls these setWidth and setHeight. Which kicks off another render, which then is stable, right? So this has a couple renders in it. It sounds inefficient, but it's the only way that actually measure it, right? Cuz you have to wait for it to finish measuring.

[00:01:28] And the good news is while it calls the render function twice here, this LayoutEffect component twice, it actually only paints once, so.
>> Brian: Again, if you're doing something like measuring stuff for jQuery or D3 and passing it into something else, this is how you would do it. But typically you would not necessarily do that here.

[00:01:51] Now this is just like, useLayoutEffect, is just like effect. It works exactly the same way, it has the same array here, as well. So if I did this, this will no longer measure anything, right? It will send to 0 and leave it at 0, right? So works exactly the same way.

[00:02:10] Really the only difference between useEffect and useLayoutEffect is if you do useEffect it's scheduled for later. Which is almost immediate, right, but it's technically asynchronous between scheduling and happening. Whereas LayoutEffect is technically synchronous, right? Render happens then LayoutEffect happens and it's synchronous, they're right next to each other, right?

[00:02:31] That's the difference.
>> Brian: Another interesting thing here to call out here is I do a useRef right here using el, right? And then here, I'm just saying textarea and ref = {el}. What this will do is it'll actually store the actual DOM component here. So if I said console.log(el) right here, it would actually give me this component here.

[00:02:57] Let's just do it. So if I say console,
>> Brian: console.log(el), it'll be probably undefined the first time, which it is, right? Cuz it'll render the first time and it doesn't exist yet. And then the second time it'll tell me, okay, this is a text area.