The React useEffect hook is frequently applied in React applications, but it is important to understand when it will run before you apply it to your application. You can also accidentally create an endless loop with useEffect if you do not understand how it may impact the state of your application. In this tutorial, we review how to apply useEffect, when useEffect will run, and what to avoid when applying useEffect. If you are just starting out with Javascript, I recommend beginning with my full 8 hour tutorial for beginners here: ua-cam.com/video/EfAl9bwzVZk/v-deo.html
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!
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.
Newer versions of React should not give that warning. Older versions of React did give that warning and you will see me add it in this series due to that. However, you are not required to add the setState function to the dependencies. React "knows" it will not change.
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
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.
I believe if you continue to the next lesson (or two), you will see I provide the short circuit operator to setState to either the data-fill array OR an empty array. Keep going :)
The React useEffect hook is frequently applied in React applications, but it is important to understand when it will run before you apply it to your application. You can also accidentally create an endless loop with useEffect if you do not understand how it may impact the state of your application. In this tutorial, we review how to apply useEffect, when useEffect will run, and what to avoid when applying useEffect. If you are just starting out with Javascript, I recommend beginning with my full 8 hour tutorial for beginners here: ua-cam.com/video/EfAl9bwzVZk/v-deo.html
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!
Thank you for the kind words 🙏
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
Glad it helped!
You're dropping some great contents.... Love the react series
Thanks Tomi! 🙏
Neat and clean explanation of useEffects. Thanks bro
Best useEffect() tutorial all over the web!
Thank you! 🙏
Thank you Dave !! Really appreciate the tutorials you make they are one of the best.
You're welcome!
Dave you are godsend honestly.
Glad I could help!
The before and after example was brilliant and probably where I would have struggled with how useEffect works. Thank
That's great! I appreciate the feedback!
Great content Dave, keep it coming!
Thanks! 🙏💯
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.
I'm glad I could help! 💯
Exactly what I needed... Thanks a ton
You're welcome!
Great video, many thanks.
Great video, ¿you have to add the setState in the dependencies, the enlist gives me a warning that setState is missing?
Newer versions of React should not give that warning. Older versions of React did give that warning and you will see me add it in this series due to that. However, you are not required to add the setState function to the dependencies. React "knows" it will not change.
Top-notch content. Thank You so much
You're welcome!
good explanation. thanx
You are welcome!
Always perfect!
Thank you!
Great video! :)
Thank you! 🙏
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
Glad you've got it now!
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.
I believe if you continue to the next lesson (or two), you will see I provide the short circuit operator to setState to either the data-fill array OR an empty array. Keep going :)
Awesome Tutorial +++++++++++++++++++++ Thank You
brilliant
Still not understand why we use useeffect.?????
"The Effect Hook lets you perform side effects in function components." More details in the docs: reactjs.org/docs/hooks-effect.html
Nice👌
Thanks!
ua-cam.com/video/cTN_4F_ZkOQ/v-deo.html
This is my cooking channel
Like share subscribe🙏🙏
yass use effect
Comment to top
Awesome Tutorial +++++++++++++++++++++ Thank You
Awesome Tutorial +++++++++++++++++++++ Thank You