React Hooks useEffect Tutorial

Learn how to use the useEffect hook in React.

Links from video:

----

----

----

----
Follow Me Online Here:

#benawad
​
----
#benawad

[ablanchi]

Wow, this practical react series is like the distillation of so many long-ass tutorials where they basically treat you like you know nothing about anything for 3 hours.
Please make more, these are gold Ben!

[habibsspirit]

Jesus Christ, MAN! How is this even possible?!?!? In under 2 minutes I understood more than I ever did with hours of reading those sophisticated lexicons some people call Documentation.

[valiknows]

Always prefer this type of tutorials vs React Docs 😂. All the best Ben !

[amanbhayani]

so happy to have found videos like this that just cut the BS, and are just focused on quick concepts. Definitely subscribed.

[jamesfoley]

Ben I like when you explain the theory shown in the React Doc's with a simple example. A lot of time the language in the React docs makes me have to look up what they are talking about....thanks for the help

[yotaraonvideo]

Well, I'm gonna parrot everyone else's comments by saying that now I understand useEffect and React Hooks much better. Good stuff, Ben! 👍🏻

[jerrylove]

I can't thank you enough. I've been using react for over a year now but had never gotten to understand the useEffect hook. After carefully watching this video, I perfectly understand how and when to use it. I've also been able to fix some bugs in my code

[darkpsypher]

Thank you so much for doing these types of videos. You've improved my understanding of useEffect by a ton!

[anthonygayflor]

Thank you for this! I really dislike the videos that explain things as if I’m learning code for the first time. But I REALLY like your style or tutorials, keep it up

[RACAPE]

I just started to use hooks at my job on a new project and this is super useful. Now all makes sense.

[mostinho]

UseEffrct is called whenever react rerenders but can limit the number of times it’ll be invoked by providing dependency array and then it’ll only be called when one of the vars in array changes

[timmyfrank]

Thank you. Way better than other tutorials or react docs. Life saver.

[thomasboittin]

Thanks for the tuto :)

Quick note to add my experience:
When I did the mouseMove event listener, I noticed that when I displayed the console while I was in responsive mode, the event was only triggered when I clicked. Removing the responsive mode makes it work.

Noobies issue but it took me a bit to understand what was happening so I figured that it might help someone else :)

[katielamber]

I am very happy I got the time to watch the whole video series of yours. You rock! Love what you do. Many thanks to you!

[vorname]

16:56 I would recommend only add stuff when lint asks for it. In this case lint is okay without setState because setState from useState will NEVER change once emitted. So the captured setState value inside the closure will never be stale. IN fact the lint plugin has this check for known cases backed into its implementation.

[frogger]

Omfg I searched high and low for a simple explanation and here it is. Thank you.

[timothyn]

Concise yet also well detailed, best explanation ive heard on effects so far, thanks!
Also +1 for the keyboard tip on how to quickly comment out highlighted code

[davidallen]

These are great videos. Looking forward to the next already. Love your channel.

[sreekumarmenon]

if you declare async function inside useEffect, you can still use async/await, like so -

const MyComponent = props => {
useEffect(() => {
async function myFunction() {
await fetch(url);
}
// Execute the created function directly
myFunction();
}, []);
return <div>Asyncly!</div>;
};

[ryunosukeakutagawa]

It's very useful to understand useEffect than react website text tutorial.