React Hooks useLayoutEffect Tutorial

Learn how to use the useLayoutEffect hook in React.
Code: github.com/ben...
Links from video:
reactjs.org/do...
Playlist: • React Hooks Tutorial
----
If you like cooking, checkout my side project: www.mysaffrona...
----
Join the Discord: / discord
----
Patreon: / benawad
----
Follow Me Online Here:
Twitch: / benawad
GitHub: github.com/ben...
LinkedIn: / benawad
Instagram: / benawad97
Twitter: / benawad
#benawad
TikTok: / benawad ​
​
----
Follow me online: voidpet.com/be...
#benawad

[@dremiq6670]

To anyone who is struggling to understand the difference between useEffect and useLayoutEffect, it helped me a lot. useEffect (Component > State Changes > Component Renders > Rendered Component is Printed on Screen > useEffect runs) useLayoutEffect (Component > State Changes > Component Renders > useLayoutEffect runs > Rendered Component is Printed on Screen)

[@romanbubnov5790]

Oh, now it make sense, thank you!

[@souravraychaudhuri6600]

Accurate 👌

[@Ubuntu_amit]

State Changes as well first render, am i correct?

[@souravraychaudhuri6600]

@@Ubuntu_amit yes... And uselayouteffect is synchronous. So, the final re-paint(after re-render) happens only after uselayouteffect has completed execution. (re-paint means when it's refreshed on the browser)

[@dremiq6670]

@@Ubuntu_amit idk what u mean by that but if Sourav's answer helps you there you go

[@SuperNirupam]

Just the way hooks are meant to be used , fantastic work ! Your code Juggling is next label.

[@benjamingeyer8907]

Thanks man, I will look at more of your hooks lessons

[@freezemasterslick]

Awesome as usual

[@kellinquinn7620]

always hit the like button before watching

[@Yetipfote]

const BeforeWatchVideo = () => { useLikeButton() return }

[@taimurazhar3923]

Hey Ben, Great work as always. I wanted to pay you back by attracting a little more attention to your wonderful channel. I wanted to ask if you would mind if I took the learning from your videos and tried to make small tutorial articles on Medium. I will of-course attach full credit in these articles and link your channel as that is the main goal. If this is something that bothers you then please let know as I will of-course not start writing without your permission.

[@bawad]

go for it

[@rajbannasa7662]

Thank you so much sir ❤️

[@halfalligator6518]

Good lesson thanks. normally a functional component will re-render if its prop or a state has changed. Since we've offloaded this "useMeasure" hook to another file... how does the component know an important state has changed? Is it because within the render it refers to a value that useMeasure() returns? So maybe components re-render also when any value is returned from a hook? Maybe i should just take things for granted, but i get a bit stressed when too much magic is happening under the hood.

[@aldeywahyuputra5719]

The useMeasure hook knows to re-render because we passed ‘deps’ as our input to it, which we use for useLayoutEffect as its dependency array.

[@aqua123670]

Awesome !!

[@teytag8844]

Dope, was doing this with useEffect cause I missed it in the docs, excited that layout exists. Do you have a recipe for checking the ref for existence (in case the getBoundingClientRect is running while the ref is unmounted) or would you just use a combination of your strategies mentioned in the other videos like the effect cleanup stuff?

[@bawad]

I'm not sure about unmounted refs, I would probably put it in a component and do useEffect + useRef to see when the component is unmounting

[@teytag8844]

@@bawad Gotcha, pretty much what I was thinking. Just for some context in case anyone else is curious about this, this question was born via a Tooltip component that shows up based on a trigger, and follows the mouse location for the duration that it's 'visible'. When it is unmounted, I noticed that some of the 'follow mouse' functions still run, assuming they have the data they expect, and since the Tooltip is unmounted things like ref are 'gone'.

[@bawad]

I actually recently implemented something similar, I stopped listening for mouse events when the component unmounted with useEffect

[@teytag8844]

@@bawad I was trying the same. The problem I ran into is that the eventListener handler that is set up when 'mounting' can continue to run after the event is removed via useEffect, which results in a 'trying to setState in unmounted component' no-op error. I have a sandbox set up with this if you're curious: codesandbox.io/s/event-handler-unbind-ir8td (move the mouse in and out of the pink box quickly, and you'll see the no-op error fire, oddly enough, just once. subsequent hovers don't cause it)

[@teytag8844]

Another thing I noticed, if I set up my mouse event listener via a react `onMouseEnter/Leave` prop, this doesn't happen. I guess react cleans those up differently than if you set the listener outside of a component

[@abdulbasir8740]

thank you, it was wonderful, I also liked that custom hook you created namely `useFetch()`

[@mylastore]

Intellij, if you paste code from another JS file automatically imports all the local and npm modules for you :)

[@patrickren7395]

useMeasure is actually a hook from react-use

[@shamilmammadov8246]

Great!

[@nagendrannagendran9468]

Hi ben. From this video, i only understood useeffect & useLayoutEffect are merely same but what's the difference between those. I've noticed an note which you mentioned at the start of this video. But for me it doesn't make sense and i think u'ven't tried to fully explain that in the rest of the video.

[@viraj_singh]

useLayoutEffect will execute synchronously after the dom is update so you can access dom elements inside useLayoutEffect but useeffect is not guaranteed to execute synchronously after dom updates so you can't access dom elements inside useEffect.

[@drizzly_dips]

@@viraj_singh I don't think that's right. It says explicitly on the docs, "...useEffect is deferred until after the browser has painted, it’s guaranteed to fire before any new renders." reactjs.org/docs/hooks-reference.html#useeffect You can see in this Sandbox that useEffect and useLayoutEffect both execute identically (except, of course, that useLayoutEffect fires first) and both have access to DOM elements. codesandbox.io/s/acess-dom-elements-useeffect-uselayouteffect-wv69s?file=/src/App.js

[@nugasoft]

Hi Ben, I need help!, I'm using: const [total, setTotal] = useState(0); and inside useEffect I run a function to get Total and I use setTotal(10), but my app, change again to 0 total, why!?? How I can run a function after load const [total, setTotal] = useState(0); ???

[@bawad]

hard to say without seeing more code, put it in a codesandbox

[@sandrosxila]

7:32 dude [...deps]

[@eat_mangos4177]

good stuff, thanks

[@tkdevlop]

NEAT!!

[@RohithVarma36]

Thanks, it’s good

[@designer6219]

which on is the useFetch video?

[@bawad]

kzbin.info/www/bejne/oGK9g6ytbLSnkNU

[@designer6219]

@@bawad Thanks Ben

[@alexn2566]

You should turn useMeasure into an open-source start-up and start do dev logs about it (ps: no hate, cool tutorial)

[@keepforever726]

🤯

[@qiroatmedia5444]

Abror qalesiz dosim )

[@k4qdex]

web dev simplified explanation is way better.

[@Jacur1980]

🤔

[@k4qdex]

u dont illustrate the reason u use it instead of useeffect.

[@ericnyamu5249]

too many hooks spoil the broth

[@bawad]

😂