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

Brian discusses the similarities between useEffect and useLayoutEffect and explains that useLayoutEffect is executed synchronous with specific mutations on the DOM. The useLayoutEffect hook can block visual updates and should only be used to measure DOM nodes for things like animations. A student's question regarding how to set the default width and height of the example textbox is also covered in this segment.

Get Unlimited Access Now

Transcript from the "useLayoutEffect" Lesson

[00:00:00]
>> Let's go back to one that actually might be useful for you sometimes, especially for my friends that like doing animations. This one's to pay attention to. Let's go talk about one that's called layout effect. So use layout effect. We've seen effect before use effect. But what I was telling you before is use layout effect or sorry, use effect.

[00:00:24] Is scheduled and you don't know when it's gonna run. And that's a problem because sometimes you need that function to immediately run right after right. So if I have layout effect component here, if I wanna measure what this is immediately after I let go of this, I need this to execute immediately after the event has happened.

[00:00:44] So I need the render to happen. And then I need the next thing that react runs to be my effect, right? Those things must follow each other immediately. If that's your case, and you have a constraint that like you can't have anything scheduled between them, there's a function called layout effect.

[00:01:01] Which actually works more. That's how component did update used to work still works might still work that way. So if you're migrating from a class based react component to a functions and hooks based component. Which by the way you don't necessarily have to do it's fine to leave class components in your code base.

[00:01:30] You might need to use layout effect if you're trying to capture component update correctly. Because this is the behavior of how component did update still works. So, let's talk about it again. Effect is scheduled. There might be stuff that happens after your component finishes rendering. Use layout effect happens immediately after your render finishes.

[00:01:54] So again, this is gonna be useful for people that are doing things like animation because you need to capture immediately after this component finishes rendering. Where is this in this particular case, I'm measuring the height and the area of this. I'm also using a ref to keep a handle on this box.

[00:02:15] Let's see, I think if I put this as use effect. To import that, use effect. Scroll down here. So it actually is able to render this fairly accurate most of the time, but the problem is that you could have animations that are coming in here in between them and modifying it.

[00:02:45] And so at the end of it, you're actually not gonna be guaranteed. But you're getting the correct number because there could be things in between there that could be happening. So, the key here with use layout effect is that you just need to have that guarantee of the immediacy of execution.

[00:03:03] And again with things like animations that becomes very important or anything that you're like measuring the DOM after that. So I think that's probably the best rule of thumb I can think of at the moment. If you're measuring the DOM taking width and height measurements and things like that.

[00:03:19] That's gonna be a good use cases I might need to use layout effect instead of effect, if you need those kind of guarantees. In this case, it ends up not being terribly important. But yeah, there you go. You typically don't need to do it. I'll put it that way.

[00:03:34] And it's more performance to do effect because react is really good at scheduling things. Yeah, that's actually probably a really good question. So I have L equals use ref here. And I'm just creating right now the container. And then if you look down here at the text area, I'm saying ref equals L.

[00:03:50] This is just saying, hey, I want the ref to always refer to this text area. It's and here you can see inside of the set width and set height that can refer to current and current facts. Let's just put console dot log. L dot current. Then if I look here in the console, you can see here it is this text area.

[00:04:21] That one. So that's what ref does is like, because what's hard about this is react can create and destroy that text area a bunch of times. You don't know when it's going to create it and destroy it. And so by putting the ref = el here, you're actually guaranteed that it's going to refer to the current text area being rendered on the screen.

[00:04:43] It's good question. That's another really good use case for refs is referring to DOM elements in within your react application. Pretty simple again 99.99% of the time, just use the fact it's fine. You don't need to use layout effect. It's really for I need guarantees, right? Like millisecond guarantees, basically.

[00:05:07] So this could be the difference between a animation looking like really jumpy or like, I'm going here and then I'm hopping here because the measurement was incorrect or looking very smooth all the way across. So I was there a question?
>> Yeah. So if we said in line number four, if we set the width to 20, it's not taking any width and height.

[00:05:36] How do we set the predefined width and height?
>> Line 28 yeah, I mean that's a good example this as well. So if I just click on it, I think I set this so that whenever you click on it, it sets the width to zero. This way I'm still able to measure correctly whereas if I do lay out or if I do effect here and I do this and I click on this, all right, so I have this text area, I make this 150 and now this is using effect over here.

[00:06:21] If I click on this, I can register a click event. Notice this is no longer correct, this width and height because I measured it too early right because the in that millisecond, because effect happened later, and the click event happened sooner. This now width is incorrectly or the height, I mean, it's just incorrect, right?

[00:06:47] This is obviously not a width one or a height 147 because what was happening before is a drag event on a text area is not actually an event in react, right? It's like okay, you dragged it, I don't care. I'm not gonna re render that because nothing changed according to react.

[00:07:03] So if I don't put a set width on there because now it's actually doing the measuring. Got it, okay. So, I'm looping back around to my understanding of this, it took me a second, effect you can see here is actually normally correct. So if I come back into effect, this is normally going to be correct for everything that you do.

[00:07:29] However, you are not guaranteed this is correct. Now if you're doing like a bunch of stuff like especially animations where you're like really tying up, that thread, there could be enough time between when you modify it and when you measure it that could be out of sync. And that's a problem.

[00:07:47] When you do it with use layout effect, you have an absolute guarantee that that is going to be the correct measurement as soon as that user is done dragging that. Okay, that is the correct solution. It just took me a second to get there.