This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "useLayoutEffect" Lesson
[00:00:00]
>> So the next one we're gonna work on is use layout effect. This is a kind of particular hook that you're really should only rarely use. So as you can see it has the term use effect. It's very, very similar to effect to use effect, and what I wanna say is you should almost always use effect.
[00:00:23] Use layout effect is peculiar for one reason. With use effect, your effect is scheduled to happen later. You actually don't have a guarantee of when that is, that could be immediately, that could be another milliseconds. Usually not more than like a millisecond later but my point being is that it's a synchronous and therefore you cannot reliably say this is the next thing that's gonna happen.
[00:00:49] With use layout effect is that you are guaranteed that it's synchronous it's the next thing that's gonna happen. So with this layout effect component, it's going to render and then guaranteed synchronously the next thing that it's going to happen is use layout effect. If you were doing use effect, it could be, something else could happen between now and then.
[00:01:11] Now you might be thinking why do I care? Typically you don't, right? Do you care if you make a API call now or in like a half millisecond? You don't really care, right? Functionally to you and your user, it's the same thing. And it's better because react can do a bunch of performance optimizations and, future optimizations that we don't know about yet, right?
[00:01:32] So in other words, always use, use effect, only use the layout effect for one of two reasons. The first one is what I'm showing you here and let's take a look at this. I had this little text area here and I have this thing that measures it. This is when you want to use Layout effect.
[00:01:57] Because now I can actually precisely measure my DOM and I can be guaranteed that as soon as this ends I'm getting the precise measurement of this whenever this click and drag finishes. With use effect I have less guarantees of when that's going to run. So I don't know if I'm gonna get precisely the the measurement that I want, right?
[00:02:19] So in other words for like, that's why it's called use layout effect is because it's mostly used for like measuring for like animations or things that need to be moved around the DOM, right? That's what use layout effect is for. It's for those kinds of precise things we, the measurements end up being really important.
[00:02:36] That's what it's made for, that's the whole use case right there. The other interesting application for this is, is this is how component did mount used to work. If you remember in class components that we talked about in intro, we had there was a life cycle method on class components called component did mount.
[00:03:01] This is the same way that component demounted worked. So if you're migrating from a class component to a function component and it matters to you how that was being called, this is how you can emulate that behavior perfectly, as opposed to use effect. Which has a slight semantic difference in terms of when it acts execute.
[00:03:22] However, this should be a temporary fix, you should always try and eventually get to use the fact instead of hacking apart use layout effect. Again, I've only ever had to use this for animations. So that's really the only thing I can think of to tell you when you should use layout effect.