One note at 5:00 for people newer to React. If you try to update state with setState (setResourceType in this case), but the value is the same as the current state, it won't trigger a rerender. This is because of the way the React team has chosen to implement useState (it helps to prevent unnecessary rerenders). This can become an issue when your state is an array (or an object), as you can mutate the array, try to update state, and it may not trigger a rerender because React thinks the array is the same (since the array reference is the same). You can solve this issue by using the spread operator (...) to create a truly new array or object: setState([...array]) or setState({...object}). More info on that at if you Google something like "usestate update not always triggering rerender component"
I found that out early on. There is this rule in React that "one simply doesn't mutate state" and it applies to hooks as well. React uses Object.is() to check for equality between the previous state and the new state, and if you mutate an array or object, it is still the same object and so it won't update.
Can you explain Two things why App being rendered twice, when you click post twice, I mean when you clicked first time, I understand app being rendered, but when you clicked again on Post. The app shouldn't get rendered as state is already same. Second why useEffect ran twice, even though you are not using StrictMode *Kindly help !!!!*
@@loneWolff1995 14 I think this is because of React.StrictMode. This only happens in development. If you remove React.StrictMode you will get only 1 log.
You are incredible! I'm self taught and employed as a full stack engineer, so I've been able to find some high quality tutorials on my journey. But you my friend, are truly an incredible teacher on intermediate/advanced language topics and I hope you continue to keep making these vids!
I'm primarily a backend/infrastructure dev and have been struggling with some very basic React concepts. I watched your useState video first and you did a fantastic job breaking it down and simplifying it so that my smooth brain could understand it. You've done a fantastic job here too. Well done!
Man, I have the same issue, of course I'm just a student right not, but the useState was a killer video for me. With that video I understood a lot of react but this useEffect is mind blowing, really funny how a lot of people love React but it is kind of complex to get it when you advance to the second page which is like, man is this so freaking easy? hah
@@veoquenoesunproblema That is because people are learning ONLY React, which relays on JS, pretty much. Good video, however this guy like almost ALL people try to assign the lifecycle to useEffect. But it is not pretty much the case because functional components behavior different from react classes, Dan explained in its blog ALL DETAILS. Also this guy does not talk about Closures and why it is important to know them... (Course because people do not learn javascript but react)....
@@veoquenoesunproblemayess, bcs react brings a lot of new concept that differs from how js works. I also having a quite hard time when learning it, because we built enterprise app and the last project uses angular. So for this new project, i have to learn react and next js as that is what have been chosen by the architect.
Kyle, every single time I feel that I don't understand something as good as I'd want, either it's html/css/js or react, I go and search a video on that subject from you. It's been a year and a half and it worked every single time. And I want to thank you for that! You're awesome.
every video of yours i search for because I am trying to understand a seemingly impossible concept, I leave 15 minutes later having a great understanding. 100% live up to your name, Web Dev Simplified
Thank you so much you really did explained the 'clean up' and how it works exactly, and that is always useEffect run the returns first so if you have any event listener already should gets deleted so you don't ends up with another event listener, if your useEffect gonna create an event listener to listen for something. God bless you man
You are a genius. The way you explain things and connect the dots is simply awesome. It is very easy to connect to what you explain and easily get accustomed to new technology . Great Going bro, keep it up :)
Hey Kyle thank you for this new series. I've been a rough time trying to study steadily while working from during this quarantine. This new series got me back on track. Waiting for the next episode!
He didn't explain the why it renders, bacause the state changed..and also print 2 renders so...one for the jsx other for the state change....and he should have also shown an example of setTimeOut in Useeffect
@@riyadzaigirdar5394 If you are trying to learn a hooks concept it's logical that you know basic react concepts like state change impact and setTimeout is a js concept, why learn react when one is not aware of js concepts.
You are the best man. So quick and easy to understand when you teach it. Can't believe I've been putting off taking the time to learn hooks when all it would have taken was a 13 minutes with you👍🏼
Hey bro great tutorial, really simple actually haha. I felt a little awkward with you looing straight at the camera though LOL, but your hair is amazing, keep it going!
god fucking damn it these are the best videos on yt on this topic i'm an experienced dev, but just started learhing js and react, and these are, up untill now, by far THE BEST vids to get you quickly into the juicy stuff. thank you
2 questions: starting from 4:47, why you have 2 "render" printed in your console, when you have 1 console.log("render") in your code? And at 5:00 when you changed your clicked button to "posts"- "resource type changed" vs "render" were printed. When you clicked second time in a row the "posts" button, "render" was printed again and "resource type changed" was not, which is understandable according to your explanations, but your subsequent clicks on "posts" did not trigger useSatet hook (if "render" was not printed). I understood why useEffect didn't work, but didn't understand why console.log("render") didn't work as well, although it rendered when you clicked "posts" 2 times in a row
2 years later ik but, at 4:47, what happens is, whenever a state is changed, useEffect runs, ofc. but also the whole function "App" runs again, cause you know, component re-rendering. we by default use strict mode in react, what it does is, whenever re-render happens it runs the whole function twice. so it simulates a mount-unmount-remount cycle, this helps developers catch bugs or side effects. so the functions runs twice everytime a re-render is made (useState triggers re-rendered when state is changed)
Hey man you're awesome, thanks for teaching useEffect, look bro you're getting a lot of hate from clement and algo expert worshippers for making that video about fang, dont feel sad about it ok. We are with you. Let those haters keep hating. You rock
Kyle we have an empty array as the second parameter in useEffect() which helps to prevent useEffect after every render. Here in the above code which you have used, we have empty array in two cases : 1- 5:25 and 2- 10:07 as parameter for useEffect()....... useEffect is not called when the state(resourceType) changes in case 1 but, in case 2 useEffect is called for every render (state change - windowWidth) even when we passed the empty array [ ] as a parameter. Can you please explain the difference?
In the second example UseEffect isn't being used to handle a state change, but is there to add an event listener. The event listener is added once on mount, and from that point on is listening for changes to the screen size. So in the second example it's not UseEffect that's being called on every change, but the handleResize function assigned to the event listener.
Pretend useEffect() is a person also coding the application with you , and they did their job "typing out lines of code" on the FIRST render, and since its dependency array is empty, it dosent have to "type it again", and when you clean useEffect(), it's like asking one of two things... "hey delete all your code so the next time you start typing it's on a clean slate " or two, "hey thanks for adding your code, we dont need it anymore so please delete it!" In Example 2, useEffect() is NOT running on every rerender, but the lines of code it implemented to your file on the INITIAL render is what we see being invoked every time
You have the gift of breaking down any difficult topics in a way that everyone can understand.
I wish there was a super like button on TH-cam 👍
I thought so too, he can probably bundle this up and make it into an in-person bootcamp and charge 15k per head.
yes, he is that guy.
super like from here
I saw many videos on hooks before, but this one only makes me understand completely in detail and in first attempt only. Thank you so much.
The subscribe button.
One note at 5:00 for people newer to React. If you try to update state with setState (setResourceType in this case), but the value is the same as the current state, it won't trigger a rerender. This is because of the way the React team has chosen to implement useState (it helps to prevent unnecessary rerenders). This can become an issue when your state is an array (or an object), as you can mutate the array, try to update state, and it may not trigger a rerender because React thinks the array is the same (since the array reference is the same). You can solve this issue by using the spread operator (...) to create a truly new array or object: setState([...array]) or setState({...object}). More info on that at if you Google something like "usestate update not always triggering rerender component"
Thanks for this heads-up. It's something really useful to know
Correction: if you use _setState_ it will always re-render.
I found that out early on. There is this rule in React that "one simply doesn't mutate state" and it applies to hooks as well. React uses Object.is() to check for equality between the previous state and the new state, and if you mutate an array or object, it is still the same object and so it won't update.
@@prince5922 no
@@prince5922 No, it the value is same as before it won't re render. You need to spread
The fact that the clean-up code runs before the event listener is a key point that's rarely communicated in docs, tutorials, etc. Very well done!
Yes, I agree 100%! 😉
Can you explain Two things why App being rendered twice, when you click post twice, I mean when you clicked first time, I understand app being rendered, but when you clicked again on Post.
The app shouldn't get rendered as state is already same.
Second why useEffect ran twice, even though you are not using StrictMode
*Kindly help !!!!*
@@loneWolff1995 14
I think this is because of React.StrictMode. This only happens in development. If you remove React.StrictMode you will get only 1 log.
I knew he was going to be good when he starred directly into my soul
You are incredible! I'm self taught and employed as a full stack engineer, so I've been able to find some high quality tutorials on my journey. But you my friend, are truly an incredible teacher on intermediate/advanced language topics and I hope you continue to keep making these vids!
ditto man! hes a beast!!
I paid money for a full react course on udemy and after every hook I "learn" from there, I come to your channel to see it reexplained better. 😅
course by whom?
Me too! hahah!
Yes, me too..
Me too. lol
Lol me 2
Superb. Merry Christmas !!
Wow. Thank you so much for your incredibly generous donation. I am honestly speechless. I hope you have a merry Christmas as well!
I'm primarily a backend/infrastructure dev and have been struggling with some very basic React concepts. I watched your useState video first and you did a fantastic job breaking it down and simplifying it so that my smooth brain could understand it. You've done a fantastic job here too. Well done!
Man, I have the same issue, of course I'm just a student right not, but the useState was a killer video for me. With that video I understood a lot of react but this useEffect is mind blowing, really funny how a lot of people love React but it is kind of complex to get it when you advance to the second page which is like, man is this so freaking easy? hah
@@veoquenoesunproblema That is because people are learning ONLY React, which relays on JS, pretty much.
Good video, however this guy like almost ALL people try to assign the lifecycle to useEffect. But it is not pretty much the case because functional components behavior different from react classes, Dan explained in its blog ALL DETAILS.
Also this guy does not talk about Closures and why it is important to know them... (Course because people do not learn javascript but react)....
@@veoquenoesunproblemayess, bcs react brings a lot of new concept that differs from how js works. I also having a quite hard time when learning it, because we built enterprise app and the last project uses angular. So for this new project, i have to learn react and next js as that is what have been chosen by the architect.
@@alexcastro9157yes, bcs this guy is not teaching js so ofc he wont talk abt closures. Closure is not react, its vanilla js.
dude I wish I had met this channel sooner. You're amazing
This is the most understandable explanation I’ve ever found. Good job mate and thanks.
Kyle, every single time I feel that I don't understand something as good as I'd want, either it's html/css/js or react, I go and search a video on that subject from you. It's been a year and a half and it worked every single time. And I want to thank you for that! You're awesome.
Wow, this is the best explanation I have ever seen so far. My respect.
every video of yours i search for because I am trying to understand a seemingly impossible concept, I leave 15 minutes later having a great understanding. 100% live up to your name, Web Dev Simplified
I understand more in the last 30 minutes than I did 8 hours of lectures and workshops ago. Thank you so much!
FINALLY!! After reviewing a ton of tutorials and explanations, I could finally understand what this hook was for! Thanks a lot!
Everything about you is cool , from hairstyle to voice to explanation
Learn from the enlightened
This is the most understandable explanation I’ve ever seen
was struggling all day with this thing, now its like crystal clear lol thank youuuu
3 different YT videos taught me how to use the useEffect hook but I only learnt it when I saw your video.
Kyle is the best ,he explains so much things in a very time span.Other channels sometimes confuses me with so much mess.
Thank you so much you really did explained the 'clean up' and how it works exactly, and that is always useEffect run the returns first so if you have any event listener already should gets deleted so you don't ends up with another event listener, if your useEffect gonna create an event listener to listen for something.
God bless you man
Yeah, that's a very important point! 😉
You are a genius. The way you explain things and connect the dots is simply awesome. It is very easy to connect to what you explain and easily get accustomed to new technology . Great Going bro, keep it up :)
I have to say this is the best explanation of react hook
Finally I understood the concept...wow what a way of teaching man...! So simple and understandable. Thank you so much
I agree! 😉
@@lukas.webdevAt 10:00, how is useEffect called, even though the array is empty and having no change
One of the best tutorials ever
close to nine months not understanding useEffect, thans for your help. It was the best one
Hey Kyle thank you for this new series.
I've been a rough time trying to study steadily while working from during this quarantine. This new series got me back on track. Waiting for the next episode!
What do you do now just curious 🧐
wow. never seen state being used to fetch data dynamically like that with the press of one button! awesome!
You tone is so smooth I can understand you code without looking at screen.
Thanks for such great videos
Any time I watch your videos, you connect the dots for me. Thank you for everything.
This guy is really awesome, talking too slowly but telling a lot of the topic for making it much easier, love u man 💚
один из немногих на ютубе, кто реально понятно объясняет. god bless him
Solved a massive pain in the ass 4 minutes, 6 seconds in. Best subscription I ever made here.
I would like to know from those who disliked like exactly what did you not like. This is one of the best useffect exp out there.
He didn't explain the why it renders, bacause the state changed..and also print 2 renders so...one for the jsx other for the state change....and he should have also shown an example of setTimeOut in Useeffect
@@riyadzaigirdar5394 If you are trying to learn a hooks concept it's logical that you know basic react concepts like state change impact and setTimeout is a js concept, why learn react when one is not aware of js concepts.
Those are morons, dont think of them...they will have more "why's" in life then "yes"
The name of the channel really speaks for itself. Thank you for this
Extremely Useful, I've just picked up react and these small doses of lectures are really making the difference.
Thanx, Kyle.
So many times used useEffect but now i understand properly, respect for you sir.
6 minutes of this video and i understand use Effect, something that i didnt understand in one hour lesson. Thank you very much 😊
This is the best explanation one can get on internet !!!! Simply wow . Thanks for the tutorial
As usual, thank you so much for your explanations. By far the best resource for web development on TH-cam!
Once again knocking it out of the ballpark
wow.. that clean up thing just blew my mind. I have been a react developer for a while now, still didn't know this. Well everyday we learn, we grow.
I’ve now watched a couple of your videos for different react hooks and they’re great. Really clear and to the point. Thank you Kyle
honestly, along with this dope explanation, i recommend just reading the react docs, they are well explained and easy to digest.
Wow thank you, bro, now I have a clear idea on useEffect
This man is awesome. Even his cat 10:32 understands what he is teaching 🐱
You have a gift man, I really understand when I watch your videos!
Man you literally are a god to me! I learn more from you than at University!
I never comment but wow. You're like a gift to the internet, thank u, rlly
The best REACT explanation on TH-cam. Thanks.
You definitely have the teacher mindset. Really clear!
Thank you so much!!The examples were quite easy to understand.I got it so well.I wish you the best!
you're a life saver and amazing teacher
You're the best, I'm starting to learn React Native and I'm looking forward to have my questions answered by you!
So clear... I was struggling with this concept, now it's ok, thank you very muck Kyle !
You are the reason I know React! Thank you!
man u are awesome the way u explain things in a simple manner really helps a lot for the people keep up doing the good stuff..
Best explnation I have come across for the react hooks !!
Thank you very much 🙏, It was a very clear explanation with sufficient but short examples.
This video makes useEffect so clear and I feel like I finally understand it now thanks to you!
one of the best explanations ever...loved it
I agree! 😉
Kyle is the best tech influencer in the universe.
i have no words which can appreciate your work.
You are the best man. So quick and easy to understand when you teach it. Can't believe I've been putting off taking the time to learn hooks when all it would have taken was a 13 minutes with you👍🏼
The best explanation, great job man
I agree! 😉
yo man hats off to you man you can break any complex topic into simple pieces love your vids man.
Much better explanation than my Udemy course... Thanks!
Best explanation, found exact answers about how does effect actually work
bro you are staring me right into my soul XD thnx for breaking down the topic btw i understood the hook fully
You are a blessing to noob web developers like me.
This is the best channel on youtube!
He isn't joking when he says his job is to simplified the web. Very easy to follow!
Great video man.
that was really great. I feel like I understand ever slightly more
Presentation Level, Ultra Pro Max!
thanks for breaking this down so well, I finally understand what's going on!
I had better luck with you than my prof. Thanks a lot!
Hey bro great tutorial, really simple actually haha.
I felt a little awkward with you looing straight at the camera though LOL, but your hair is amazing, keep it going!
the dude stares straight into your soul lmaooo, great teacher thoo
You are awesome man! You explain things in a very simple and comprehensive manner, thank you :)
I always look forward to the intro tune, it's soothing.
Thank you Kyle...... Your video is very helpful for the beginners like us!
This video is incredible, thank you for explain so easier topics that seem impossible to understand!!
This is awesome, good example, good explanation, way more better than udemy course
You are a Genius man! 💯👌and you really really know how to explain. Thank you man
god fucking damn it these are the best videos on yt on this topic
i'm an experienced dev, but just started learhing js and react, and these are, up untill now, by far THE BEST vids to get you quickly into the juicy stuff.
thank you
The best and clear explanation ever
2 questions: starting from 4:47, why you have 2 "render" printed in your console, when you have 1 console.log("render") in your code? And at 5:00 when you changed your clicked button to "posts"- "resource type changed" vs "render" were printed. When you clicked second time in a row the "posts" button, "render" was printed again and "resource type changed" was not, which is understandable according to your explanations, but your subsequent clicks on "posts" did not trigger useSatet hook (if "render" was not printed). I understood why useEffect didn't work, but didn't understand why console.log("render") didn't work as well, although it rendered when you clicked "posts" 2 times in a row
2 years later ik but, at 4:47, what happens is, whenever a state is changed, useEffect runs, ofc. but also the whole function "App" runs again, cause you know, component re-rendering.
we by default use strict mode in react, what it does is, whenever re-render happens it runs the whole function twice. so it simulates a mount-unmount-remount cycle, this helps developers catch bugs or side effects.
so the functions runs twice everytime a re-render is made (useState triggers re-rendered when state is changed)
Hey man you're awesome, thanks for teaching useEffect, look bro you're getting a lot of hate from clement and algo expert worshippers for making that video about fang, dont feel sad about it ok. We are with you. Let those haters keep hating. You rock
Simple clear explanation of the basic concepts. Very helpful. Thank you.
amazing explanation in such a short video, thank you!
Bro does look like someone named Kyle. Love your content
those 15 minutes videos gave me more understanding than a week of self learning😁
Thank you man. Keep making these types of videos. I love them all. Very cool precise and clear. No b.s.
You are my go to channel when I need to learn
I just love the way you explain Very straight forward!
unrelated comment but your hair looks incredible in terms of style, volume and shine
this helped me learn how i've been improperly using hooks. thanks!
Dude you explained is so easily, simply amazing man 🔥
Kyle we have an empty array as the second parameter in useEffect() which helps to prevent useEffect after every render. Here in the above code which you have used, we have empty array in two cases : 1- 5:25 and 2- 10:07 as parameter for useEffect()....... useEffect is not called when the state(resourceType) changes in case 1 but, in case 2 useEffect is called for every render (state change - windowWidth) even when we passed the empty array [ ] as a parameter. Can you please explain the difference?
In the second example UseEffect isn't being used to handle a state change, but is there to add an event listener.
The event listener is added once on mount, and from that point on is listening for changes to the screen size.
So in the second example it's not UseEffect that's being called on every change, but the handleResize function assigned to the event listener.
Pretend useEffect() is a person also coding the application with you , and they did their job "typing out lines of code" on the FIRST render, and since its dependency array is empty, it dosent have to "type it again", and when you clean useEffect(), it's like asking one of two things... "hey delete all your code so the next time you start typing it's on a clean slate " or two, "hey thanks for adding your code, we dont need it anymore so please delete it!"
In Example 2, useEffect() is NOT running on every rerender, but the lines of code it implemented to your file on the INITIAL render is what we see being invoked every time
thanks
@@josephquintiliano2904
Thank you for this. Finally understood useEffect and useState