React useEffect Hook tutorial | Learn ReactJS

In this React useEffect hook tutorial, you will learn how to determine when the useEffect hook is called into action with React. You will also learn how to load and save data with the useEffect hook and how to avoid the biggest useEffect hook mistake.

🚀 This lesson is part of a Learn React tutorial series playlist:

React useEffect Hook tutorial | Learn ReactJS

(00:00) Intro
(00:05) Set up
(00:53) useEffect hook with no dependencies
(01:46) useEffect hook at app load
(02:51) useEffect hook only when a dependency changes
(03:55) useEffect is not synchronous
(05:32) Loading data with useEffect
(06:40) Avoid this BIG mistake with useEffect
(07:10) Avoiding a loading error with useState
(08:55) Saving data with useEffect

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:


📚 References:

✅ Follow Me:

Was this tutorial about the useEffect hook in React JS helpful? If so, please share. Let me know your thoughts in the comments.

#react #useeffect #hook

[vincentiusherie]

I've watched numerous tutorials on useEffect (and ReactJS in general). Yours is and are the best. Very very clear. i don't think this tutorial is a "how to" for beginners because it is comprehensive. But the way you explained it is so easy to understand. Many many thanks for your videos. They're absolutely brilliant! You are a great communicator!

[keepanopenmindlookatallthe]

I've spent days trying to read and learn about incorporating setInterval within useEffect, useState and useRef.
This made it VERY clear how it works

[muhammedozalp]

Neat and clean explanation of useEffects. Thanks bro

[MrSalFav]

Thank you Dave !! Really appreciate the tutorials you make they are one of the best.

[ghostpieces]

The before and after example was brilliant and probably where I would have struggled with how useEffect works. Thank

[CodeWithTomi]

You're dropping some great contents.... Love the react series

[fernandosalas]

Best useEffect() tutorial all over the web!

[aya]

I watched your javascript, and advanced javascript tutorials and jumped into react several days ago after I finished freecodecamp react tutorial. Now, I grasped the concept of useEffect and got 'aha' moment. Thank you so much for being wonderful teacher and dedicating your time and talent to make awesome tutorials.

[skillkrio]

Dave in the timeframe 06.10, you are setting the items from the localStorage and the initial value is empty array. I am just wondering how it worked on your pc because when i console the localstorage the value is null if there are no localstorage created. once the component finishes its execution it executes our useEffect and trigger the setItems(here value is null from shoppinglist). This cause App to re-render because our Items have been updated from [ ] to null. This causes error. But the second way is working fine. Is that edge-case that you forgot or am i doing wrong.

[julianblanco]

Great video, ¿you have to add the setState in the dependencies, the enlist gives me a warning that setState is missing?

[replayzor]

I deleted the whole thing because of that error min 8:50 =)) and started over . I deleted the localstorage by mistake in the 9th video tutorial. Now I know why i got the error || [] :)) sad day for me