Learn useLayoutEffect In 5 Minutes

In this video I cover everything you need to know about the useLayoutEffect hook. I also compare useLayoutEffect to useEffect so you can know when to use which hook.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:30 - useLayoutEffect vs useEffect
02:19 - When to use useLayoutEffect

#ReactJs #WDS #useLayoutEffect

[samael]

Спасибо. Более подробного и компактного объяснения не встречал. Как всегда четко и по делу.👍

[yarngoblyn]

Holy moly, I ran in the exact same problem last week. A calendar in react marked my query range but also the init range, because the timing of the useEffect was terrible. My stupid solution was a chained useEffect (first useEffect changes a helper value and nothing more, which triggert a second useEffect only for this value and put my parameters in the components). I think I will give useLayoutEffect a try if I have to change the application again. Thank you for the video.

[MrZiyak]

I had used this for a project where I needed to set css properties in the component itself. Very useful hook for some niche cases.

[Stoney_Eagle]

Synchronous use Effect 😍😍😍
I have some places this will definitely feel home.

[programmingwithmoaad]

Thanks Kyle
as usual extremely simple and clear explanation

[muratasarslan]

This thing couldn't be explained better, thank you 👏

[erikamiseva]

Great video, very clear and helpful—thank you so much!

[petarkolev]

Kyle, yet another extremely simple and ultra useful explanation!!! Thank you!!!

[userZAKCXKC]

New to react here... I've been using useEffect in the tutorials I've been taking but I didn't understand what exactly it did. I mean the name kind of explains it, but I didn't fully grasp what it did, 30 seconds into this video and I'm like "ohhhh! 🤦" Thank you!!!!

[arpitagrawal]

thanks for this very helpful explanation. your react hooks playlist is awesome!

[bikashrai]

I had same requirement to implement and I was about to loose my mind because it was not working out, until I came across your video. Thank you very much WebDevSimplified !!!

[ianeltombozafy]

So if it's related to something visible to the UI (layout), we use useLayoutEffect. It's Thank you man 😉

[tiagoneto]

Many tried... but you did it! Thank you for making me understand this!

[Vaibav]

Lot of clarity in very little time. 🥂✨

[Johnny-rnfb]

in 5 minutes i found out all what i need. Thanks

[mauro]

Thanks for the explanation Kyle, learning React in 2022!

[yassinerassy]

thank you for this amazing explaination and for putting the right useCase for useLayoutEffect hook

[brunofilgueiras]

Kyle, thanks for your explanation will never forget the difference now :)

[MadhanR-bhdt]

Hey superhero! Is there any plan to upload featherjs course in future?

[sacidcelik]

Super useful, thanks! Could have used it in one of my projects 😄