React Hooks useLayoutEffect Tutorial

so we're gonna be taking a look at the use layout effect hook now this one has a niche use case which I only use on rare occasions now the key thing to know about this is this line right here from the docks it says the signature is identical to the use effect took but it fires synchronously after all Dom mutations and so this part is how it differs from use effect and in practice what that means is it's good for for example if you want to measure the box of something or measure the width of a Dom component after a render occurs or any kind of thing where we rely on getting information from the Dom and the use effect we want to try out usually out effect and practice a lot of times I'm usually taking this advice right here where it says we recommend starting with use effect first and only trying you get usually out effect if that causes a problem so in practice that's usually what I do but I have found a pattern of where you use layout effect has been helpful for me so we're gonna be taking a look at a example of that so I'm going to measure the dimensions of this input field so I want to know how wide oh how tall and all that stuff and so what I'm gonna do is I'm gonna start by just saying use layout effect here and we're going to do just on first mount and then we are going to import it up here and here I'm going to say console dot log input ref we're already storing the ref up here so we have used ref input ref and we are passing that to this input here ref is equal to input ref and then here I'm gonna say get bounding client rec so this is a function that basically gives you the dimensions of this this component or this Dom node so if we come over here and this should be input ref dot current we can see in our log we can see the dimensions so here we can see the width and the height and we also see positioned on the page where it's at top left right bottom and the X&Y coordinates so this can be helpful for doing different sorts of stuff and that's the basic gist of it whenever I want to get a value for example the measurements of a Dom node I will use easily out effect instead of use effect so let's look at another example that is a little bit more practical so I'm going to go ahead and just console or comment this out and go over to the hello example over here so here for example I might want to know how wide or how tall this this div is right here because this data dynamically changes whenever I increment the number we're gonna get a new factor so this is going to be new text and it's gonna be a new width so I mean we may want to know the width after each render so how can we do that and that's where usually I know effect can be used so we're gonna go over here to hello I'm gonna go ahead and just go to use fetch real quick and remove the timeout so this thing isn't super slow so I'm gonna remove that and I'm going to keep everything else the same all right so here what I want to do is I'm going to first just put a div inside of this and reason why I'm doing that is if I come here and I open the inspector and look at this element you'll notice it spans the entire page so what I want to do is in this pair element say display flex and that way I can see just the width of it inside this small div here so we're gonna say display flex and then here I'm going to store a reference to this div so I'm going to say Const div ref is equal to use ref we're going to pass that in ref is equal to div ref and I'm going to get rid of this and I'm going to say you slate effect right here and let's go ahead and put it up here now for the dependency I want to remeasure this every time there is some new data so I'm going to add data as a dependency here and let's start by just console logging it so I'm going to say div ref current and dot get bounding client rekt all right so we can see in the console log here it is has a width of 368 or 386 I mean and if we increment you can see the width has changed now to 285 so now we can measure it each time we change it the other thing is you may want to display something based on this so for example I may want to display the width so we can store this in a you state if we want to go back to Const and so here I can say div or let's call it wrecked and set rect is equal to you state and it's going to be an empty object to start off and so here I'm just going to display this information I'm say rect or json dot stringify the rectangle and then in d u s-- layout of fact we're gonna say set rect and let's not bleed everything set erect so every time we get a new piece of data we are going to get the size of this div and then we are going to update this state and we're going to display the new sized rectangle so here you can see the JSON for it and we can display this maybe a little bit more pretty if we use a pre tag and then we say to to format it see if that gets a little better nice so now I can see the dimensions and I can increment and I can see we get some new values and new values for this that's pretty cool and we could turn this into its own custom hook if we want to so for example we could call this thing like use measure dot j s and here you could you could build this hook in a number of ways but let's say we just pass in the the ref to the use measure that we want to do it for and let's copy this and then what we return is the rectangle so here we're going to import all this stuff so import from react use state use ref and use layout effect I guess we could pass in the dependencies for the use layout effect as well say dependencies here and I guess react easily oh it was passed as a dependency list that is not an array literal oh I guess this doesn't know because it's of the type any even though we're in JavaScript interesting I guess it just says we can't statically verify so it's giving me a warning about it so I guess we can hit command and then period and we can just disable this for this line because we know it's gonna be okay or at least we are hoping it is so now instead of using a div ref here we can use whatever ref is passed in so this is one way that you could write this hook and so what do we get after we've written a hook like this so now I could just say rectangle is equal to use measure and then I pass in the div reference and then my dependency is the data and we can remove this and now I can just use my use measure like this so my use measure hook we have the reference here to the div and then here we have the dependency list of when we want it to remesh so we'll see this in action and see if we got this correct increment and there we go we'll got it working nicely we could also if we wanted to do this move the reference inside of use measure here so let's move this inside of use measure so instead of taking this as a proper there we can say use breadth and I guess I don't know what I want to call this my ref maybe and so we gettin past the rectangle as the first argument and the reference is the second argument too and we returned this as an array so now in our use measure over here all we have to pass in is the dependency and then we have the rectangle and then our div ref as the second value so now we have this used measure hook where I can put this wherever I want to so now I can use it in my app over here as well if I want to so I could say use measure and I want this to just do on initial mount we can pass in I guess I was going to pass in my input ref but here we can have another one put ref two and we have a rectangle and now we can pass that in here and now we're measuring the bounds of this input box here so now we've made like a nice little utility there and we are measuring it with the use layout effect but there you go that gives you kind of an idea of when you might want to use you use layout effect and how it works and we made kind of a custom hook here that you can use to measure the size of components and a few different ways you can build this hook depending on how you want it to work you

Channel: Ben Awad

Views: 33,818

Rating: 4.929471 out of 5

Keywords: useLayoutEffect, useLayoutEffect Tutorial, React, React Hooks, React Hooks useLayoutEffect, Hooks useLayoutEffect, React Hooks useLayoutEffect Tutorial

Id: ommC6fS1SZg

Length: 10min 22sec (622 seconds)

Published: Tue Jun 25 2019