Full React Tutorial #15 - useEffect Dependencies 

For new viewers: your component might update twice on first run while mounting, it is because newer version of React has StrictMode which ran it twice on development environment for debugging purpose, it will be once in case of production

Wow, is this heaven?! I been watching hour-long videos and no one managed to explain useEffect at all and you did it in two videos 4min each. Big big thanks man I'm so grateful, I can't put it in words.

***SUMMARY*** useEffect() -- accepts the second argument which is an empty array and is called dependency. When you leave dependency array empty, the callback in useEffect is invoked only once when component renders to the DOM but never again invoked even if component re-renders. Proviging state data - When you provide state value/data as dependency to the dependency array, callback fires each time that value changes

Such a simple explanation.... Weldone brother

Hi Sir! I just watched, NodeJS, JWT Auth, Tailwind CSS and This React Series in just two days. Thanks for the efforts.

Literally, I'm watching this course like a serial, having so much fun and waiting for the next episode :D. Shaun is a master, hats off.

Thank you for sharing your knowledge, Shaun! A real-life website example where the dependency are used successfully would be amazing!

Why can't every RU-vidr in this niche explain things this clearly. Brilliant video~!

Thank yoy Shawn for explaining useeffect dependencies with terrific example, now I understand much more about useeffect !!!

Your explanations are mind-blowingly helpful and concise. I come to these videos after days of lecture in my coding bootcamp to understand the things we talked about in class, and you manage to clear up *so much.*

Simple yet effective explanations as always mate! Love the content

This playlist is diamond!!!Understood every concept clearly...

Thank you. You're the best frontend instructor.

Bro what i can say for ur epic simple smooth explanation!!! U are a legend in my eyes!!

You really explained very clearly and I understand it to the point that I almost creat my own useState and useEffect. Thank you so much

The fact that learning about useEffect dependencies can be summarized in such a clear, brief, and concise way blows my mind. This is amazing and helped me a LOT. Thank you. Edit: And it's only 4 minutes and 19 seconds long.

I've been watching you since 2018 bro. I can honestly say, I may not have made it in this profession if not for your videos. Thank you!

Brilliantly clear explanation mate! Many Thanks!

Great series , enjoying alot 👍🏼

This is the best explaination I've seen so far

These two videos on useEffect were amazing!

thank you. every video takes me on the path of what im learning.

This React Tutorial is great! Thanks for a great job!!

I'm someone who understands things slowly and needs to watch something many times to get it. But this was just clear as day right of the bat!!

Excellently described the whole concept.

Love the Guru of Greatness !

Second video of yours that I'm watching and I already understand useEffect with dependacies better than the actual React documentation itself.

simple and to the point great video

Awesome tutorial! Would like to see more app tutorials with React from you.

Thank you! You make this sound so simple. Is it bad to be enjoying these videos while I'm meant to be on holidays?

great man, I have learned a lot from you

Hey man, you tutorials are awesome!... the only thing I hate is that I have to wait for the next one to be uploaded 😋

Once again, great explanation for both seasoned and beginner devs. Some instructors get into too much details early on instead of just teaching the stuff first. You excel at that!!

Thanks, man u the best Simple explanation well done Ninja

Wow. I couldn't understand it clearly when I had learned it and now, I could understand it at the first try 😊

You are the boss shuan , thanks

Simple clear explanation. Excellent!

Thank you for uploading this Serie. I am waiting for new episodes.

i bought an udemy course for reactjs and it sucks big time. so i went here instead. free and yet more comprehensive. you are a god

Thank you so very much for the quality content

Thank you, Shaun

Thanks bro, very nice explanation :)!

Wow such a nice Explanation

Awesome , Please do more React.js tutorial. TKS for your content .

You are truly a NINJA

So grateful to you man, very clear! :D

Super helpful!

I love you so much)) You are my teacher Splinter

This is brilliantly explained.

I finally understand this well, thanks a lot mate

thank you very much mr.ninja

Yo! I just subscribed and liked. Now useEffect is so clear to me.

Hi net ninja, can you please link up the whole playlist in the description rather than making us to go to the channel to find it? I mean, it's fine but just a request if you can do so. BTW love your content and your JWT Authentication course was awesome, used it to create a course project login and sign up and also with help of some other sources got the email verification to work. ❤️

your amazing bro

probably u r the best

ah ! Man... Nice, Now I have a clear vision on useEffect

Is there a difference between using useEffect with no second argument or just leaving the code (like a console.log) inside the component function? As far as I can tell both cases will run in every re-render.

The useEffect without any parameter will render everytime I change something in the component? The entire component? If i pass some value through the useEffect, it will render when that specific state change? And the useEffect with a empty array will render only once when the component loaded?

How many videos will be in this series? And is this the only React series which we have to do leaving old playlists related to React?

Please include testing in this course! :)

concept made simple😎

Hi ! Good tutorials. On line 21 : I had "WARNING in [eslint] src\Home.js > Line 21:7: React Hook useEffect has a missing dependency: 'blogs'. Either include it or remove the dependency array react-hooks/exhaustive-deps, so w/ a quick fix (i wanted to keep 'blogs' info) useEffect( () => { console.log ('useEffect ran'); console.log (blogs); },[blogs, name]);

AMAZING

self-defined variable (let a = 1) cannot be the dependency of useEffect as it gives no effect even if the variable changes. I think useEffect is the best to pair with useState. I wonder if there have any other variable/const stuff that can be use as dependency for useEffect.

king

❤️ cause I'm out of words

Love it

In a real world experience when would you need to re-render ? when should we add dependencies to the array ?

Thanks

🎯 Key Takeaways for quick navigation: 00:16 🔄 The `useEffect` hook can be configured to run a function after every component render, but sometimes you only want it to run under specific conditions. 00:41 🧩 To control when `useEffect` runs, you can use a dependency array as its second argument. An empty array means it only runs after the initial render and not on subsequent state changes. 01:25 🚀 You can specify dependencies in the array to make `useEffect` run whenever those dependencies change. For example, if you want to run it when a specific state variable changes, include that variable in the array. 03:14 📦 Dependencies in `useEffect` control when the function runs. If a dependency changes, the function runs. If a dependency remains constant, the function does not run again, even if you trigger state updates.

Hey there, I have an issue. Passing an array in dependencies causes infinite loop any help please. Tou can recreate it by passing any type of array in the dependencies. please help

Finally I understand the useEffect dependency.......I just used to play around till it worked 😅

it would be great if you could make a React udemy course just like the javascript one with the projects and everything

does that mean that i can have for example 5 useEffects and each one will be fired when the prop set changes?

what acutally is a render?? is it any time of web page redirector??!!!

thanks

This was an amazing explanation, thank you. I couldn't understand why it triggers for the first time for name state, it is not changing? Can you tell me and give me an example?

when do we pass functions inside the useffect array

for me when using the useEffect hook, it runs twice during initial render, i found out that it is due to the project running in react strict mode which will render the project twice in dev mode. simply remove that to fix the issue

if you made a react course in udemy definitely i will buy it

Great explanation! Anyone know any common use cases of this in the real world project?

ty.

Thank you so much for this course. Honestly, you are life saver. Please, i have a problem . My useEffect() is render twce once i reload the page. Please why is it behaving likethis. I even copied your code on github. it still render twice when i reload. Thanks alot

Wicked

i was losing my mind when my use effect was run twice on initial render, turns out in dev mode react strict mode does it twice on initial render

Yeah, but using an empty array on useeffect is considered a bad practice and will cause an eslint warning. Also trying to call functions inside useffect and using the function as dependency and using usecallback in the function is also considered bad practice. So what can we do in those scenarios?

I want to add a dependency such that everytime I make a write call to backend that should trigger useEffect ,anyone please share your knowledge

why we use array [ ] as dependency , why can't use object, variable instead of array useEffect(() => { console.log('useEffect'); }, name or {name});

dependency warnings always makes me angry & fills up the terminal.

LOL 4 minutes and i understand it easily

01:58 A button at the bottom, or a bottom at the button? Greetings from LEO.

I hope u r not planning to do redux after this series by completely ditching vuex 4 with vue 3

This is more like watch in vue js

Anyone also having useEffect running twice upon initial render for some reason?

useEffect ran 2 times in my browser. anyone facing same issue?

useEffect had a positive sideEffect Me .

4th comment

First comment

I am speed

1st Want a ❤️