This is by far one of the most useful videos I have watched over my 10 years of youtube watching career. seriously. I wathced it twice yesterday, didn't get it. Rewatched today and get everything. Absolutely great video.
I just watched this, and this video is trash literally there is no point to call use effect here when you can literally remove useEffect and call them normally.
Kudos to TH-cam algorithm for recommending this gold mine!! Every time I re-watch the same lecture, I learn something new from it. Even the shorts are too useful. Thanks for all your effort mate!!
That last part, using state as dependence I didn't know that. This video is packed with lot of very important lessons. Thanks buddy. Greetings from Tanzania 🇹🇿
This is really cool. I once taught I knew all about useEffect, but watching this made me realize I never new nothing. Love how you broke it down. Keep it up
at 18:00 you used useLayoutEffect, why? It seems redundant, not performant and adds code complexity for no reason. Any reason for not just doing the following? const savedOnSuccess = useRef(options.onSuccess); savedOnSuccess.current = options.onSuccess;
For those slightly confused about what exactly he means by references…put simply a reference is just the address of a memory block. For example, your variable which is assigned to an object doesn’t hold the actual definition of that object, it holds the value of the memory address which contains the stored object. So it’s just pointing to that memory address block which contains the object. If I assign variable X to variable Y which is assigned to an object, then variable X is simply pointing to the same memory address as variable Y. Hence why variable X can mutate the original object defined by variable Y. JavaScript Objects, functions, arrays and other composite types like dates, sets, maps and etc…
this is genuinely one of the best videos I've watched explain a seemingly complex concept. once broken down into the fundamentals, paired with straightforward examples (and gotchas!) - the complexity goes way down. thank you Jack! I was in the middle of a large refactor to reduce our eslint errors and the only one remaining is the useEffect dependancy array ones. this video definitely is going to help me tackle the more complicated ones from that.
damn I have been working as full stack engineer for 7 months now but I swear I have to watch this video three times to fully understand . this is one or if not the most underrated videos on youtube on useEffect . I trully understand how this things work. some people think they understand pass by reference but most developers dont understand these concepts. I will share this video for sure. I spent this weekend to go over his videos on useLayout, useCallback ,useRef and so on. thanks a lot.
Jack, just found your channel today. Really great content 🎉 thanks for the crystal clear explanation that are built up like a gradual layering of knowledge and skill. This is how tutorials should be.
Excellent video, excellent channel. The examples you bring are amazing and the way you explain the content, step by step, is really cool. Hello from Brazil!
The title and thumbnail are opposite of click bait. I almost didn't click it thinking I'm gonna get the same basics, aren't I? Boy was I so wrong I am glad that I clicked it.
This is easily one of the best code related (at least when it comes to React) videos I have ever watched. I thought I had a pretty good idea about how useEffect worked, but I learned a lot from this and deepened my understanding. I'm sure there are optimisations I can do in my codebase now armed with this knowledge :)
Great explanation about useEffect. It is a hook with some complexity. Just last week had an example in a pretty large useEffect to programmatically set some form fields based on other filled in fields. In the useEffect, we needed a value to compare to other fields. But had the problem at first that the value kept triggering the useEffect hook undesirably. When creating a reference to that value, the useEffect hook wouldn't trigger when we used that value inside the hook. Learned a lot ;)
Amazing! Watching this video is like watching a great movie multiple times, and it just gets exciting and fun every time you watch it! Thank you, Jack!
Great content, Jack. I'm a PHP dev who's getting into React, and I've started binging your channel. I don't mean this as criticism, just giving some feedback on a couple of things which made the video somewhat difficult to follow. I realize this video was released a while ago so apologies if these points have already been addressed. First, is it possible to turn off hinting in VS Code? The popups while you're typing are distracting, and obscure your work. In the same vein, it would be easier to follow if your headshot wasn't obscuring the code, perhaps by being smaller or hidden altogether when you're not talking directly to the camera. Thanks for providing these tutorials. As a vlogger I recognize how much work goes into making them.
okay i must admit that, u r amazing, i hv been coding for almost a year now (not much i know) but built few apps alrdy, but once i saw ur video i knew i'm missing few things and also did some mistakes with these apps, and gotta say also ur teaching is awesome, hope u and ur channel best of luck, ty
I love how knowledgeable you are in React and state management and how you make complex stuff easy to understand. I wish you had a comprehensive React course. I would have definitely bought it in the blink of an eye.
Why I didn't know about this channel before? ... I mean you're an awesome instructor!! I enjoyed this video so much and I learned a lot!! Thanks so much for this great content, you just got a new suscriber! 🥳
When you've put the useFetch inside the useEffect I've already knew it would loop because useEffect is activated at every rendering, if you don't condition or apply that last array parameter, it will loop everytime.
The part of the video between 3:51 and 5:20 explains very well the render and re-render lifecycle. I urge anyone who is still a bit nervous about useEffect to watch and rewatch this section til it sticks. I had to draw a diagram to explain to myself what was happening at each step. Also, if you're using console.log within the useEffect hook, don't forget to make sure that there isn't a React.StrictMode component within the index.js file.
Awesome master class! Could you please tell me what VSCode extensions you used for the following in the video: - the font styles - the code suggestions - the theme
One thing that's helpful when thinking about useEffect is that it's like a callback.. and it's gonna get called by react AFTER the component function ENDs.
Hi Jack! I love these videos, now I really understand useEffect. Can you explain a bit more about 17:18 on what you mean when using useRef with useLayoutEffect in terms of 'change this later on'?
So useLayouEffect is an effect that gets run synchronously after the render completes. Honestly the best thing to do here is just to remove the useLayoutEffect and set the ref.current unconditionally right after the useRef call. It's zero cost to do that and there is no potential issue with re-renders since setting a ref does not force a re-render.
Great video! The useEffect dependency warnings are just too damn annoying. Sometimes you know what you're doing and that you're specifically watching just one piece of state, but it still wants you to add extra dependencies which, if you add, turn into bugs. Then you gotta keep adding ignore lines to make things work the way you want to.
This got very convoluted very quickly. Especially with the need for 4 other hooks to get it to work as intended. Will probably need to watch this a few more times to fully grasp what is going on.
That would depend on the caller to ensure that the function of the custom hook is correct. IMHO it's better before the hook to ensure that its own dependency behavior is correct regardless of the the parameters sent to the function.
This is by far one of the most useful videos I have watched over my 10 years of youtube watching career. seriously. I wathced it twice yesterday, didn't get it. Rewatched today and get everything. Absolutely great video.
Wow, thanks!
Joon I see your 3 watch attempts and raise you two.
@@jherr Thanks for code included!
I just watched this, and this video is trash literally there is no point to call use effect here when you can literally remove useEffect and call them normally.
I thought I'd just about mastered useEffect but this taught me even more. Especially about what react does under the hood. Your videos are a goldmine.
100% agree
I had the exact same thought haha. He explains the concepts so well.
He is expert
Kudos to TH-cam algorithm for recommending this gold mine!! Every time I re-watch the same lecture, I learn something new from it. Even the shorts are too useful. Thanks for all your effort mate!!
The useCallbackRef pattern is EXACTLY what I was missing in my mental puzzle to properly memoize passed functions. Thanks 🙏
Every react dev should watch this video. You explain concepts so clearly and at such a good pace! All your content is so good man!
This is one of the best break downs of a hook I have seen, hope to see more like this.
Best explanation of useEffect I have ever seen. Thanks so much!
That last part, using state as dependence I didn't know that.
This video is packed with lot of very important lessons. Thanks buddy.
Greetings from Tanzania 🇹🇿
This is really cool. I once taught I knew all about useEffect, but watching this made me realize I never new nothing. Love how you broke it down. Keep it up
at 18:00 you used useLayoutEffect, why? It seems redundant, not performant and adds code complexity for no reason.
Any reason for not just doing the following?
const savedOnSuccess = useRef(options.onSuccess);
savedOnSuccess.current = options.onSuccess;
You are correct, I didn't need to do that.
For those slightly confused about what exactly he means by references…put simply a reference is just the address of a memory block.
For example, your variable which is assigned to an object doesn’t hold the actual definition of that object, it holds the value of the memory address which contains the stored object.
So it’s just pointing to that memory address block which contains the object.
If I assign variable X to variable Y which is assigned to an object, then variable X is simply pointing to the same memory address as variable Y.
Hence why variable X can mutate the original object defined by variable Y.
JavaScript Objects, functions, arrays and other composite types like dates, sets, maps and etc…
Absolutely best explanation about how useEffect dependencies work! 🔥🔥🔥
This video literally cleared up a lot of confusions. Really grateful. This video is a gem 💎
this is genuinely one of the best videos I've watched explain a seemingly complex concept. once broken down into the fundamentals, paired with straightforward examples (and gotchas!) - the complexity goes way down.
thank you Jack! I was in the middle of a large refactor to reduce our eslint errors and the only one remaining is the useEffect dependancy array ones. this video definitely is going to help me tackle the more complicated ones from that.
Fantastic! Thank you! And, of course, good luck!
The stopwatch example was mind blowing, thank you, for the good work !
Thank you so much for this. I've been struggling with this for weeks!
very clear and an in depth uses of some of react hooks, thanks Mr. Jack as a usual!
damn
I have been working as full stack engineer for 7 months now but I swear I have to watch this video three times to fully understand .
this is one or if not the most underrated videos on youtube on useEffect .
I trully understand how this things work.
some people think they understand pass by reference but most developers dont understand these concepts.
I will share this video for sure.
I spent this weekend to go over his videos on useLayout, useCallback ,useRef and so on.
thanks a lot.
Fantastic explanation of a sometimes frustrating hook in React, definitely bookmarking this one!
really help a lot! This is most deep dive video , I ever seen in coding journey
hands down the best teacher of React. I kid you not !!!
Jack, just found your channel today. Really great content 🎉 thanks for the crystal clear explanation that are built up like a gradual layering of knowledge and skill. This is how tutorials should be.
Excellent video, excellent channel. The examples you bring are amazing and the way you explain the content, step by step, is really cool. Hello from Brazil!
The way you explain these topics is amazing
The title and thumbnail are opposite of click bait. I almost didn't click it thinking I'm gonna get the same basics, aren't I? Boy was I so wrong
I am glad that I clicked it.
This is easily one of the best code related (at least when it comes to React) videos I have ever watched. I thought I had a pretty good idea about how useEffect worked, but I learned a lot from this and deepened my understanding. I'm sure there are optimisations I can do in my codebase now armed with this knowledge :)
Best channel I've found so far!! Thank you so much!!
A season mastering for all hooks please! Thank you for this vid! Much appreciatted
Just discovered your channel now, and I'm very impressed with the lucidity of your explanations!
Your videos actually helped me a few times at work. Hope you'll keep up uploading
Great explanation about useEffect. It is a hook with some complexity. Just last week had an example in a pretty large useEffect to programmatically set some form fields based on other filled in fields. In the useEffect, we needed a value to compare to other fields. But had the problem at first that the value kept triggering the useEffect hook undesirably. When creating a reference to that value, the useEffect hook wouldn't trigger when we used that value inside the hook. Learned a lot ;)
Thank you for the video! I'd been having trouble on a project recently, but I realize now what I'd been doing wrong!
Amazing! Watching this video is like watching a great movie multiple times, and it just gets exciting and fun every time you watch it!
Thank you, Jack!
I've seen seasoned developers make the mistakes you've shown in the video. Thanks a million for this! I'm a big fan
Woow blown away but the explanation, use case etc. Keep up the good work!!!
Quality video as always Jack! Now I know I never understood useEffect dependency till I watched this video
What an awesome explanation of the react useEffect hook. Many thanks!
So much value in one video!
Great content, Jack. I'm a PHP dev who's getting into React, and I've started binging your channel. I don't mean this as criticism, just giving some feedback on a couple of things which made the video somewhat difficult to follow. I realize this video was released a while ago so apologies if these points have already been addressed. First, is it possible to turn off hinting in VS Code? The popups while you're typing are distracting, and obscure your work. In the same vein, it would be easier to follow if your headshot wasn't obscuring the code, perhaps by being smaller or hidden altogether when you're not talking directly to the camera. Thanks for providing these tutorials. As a vlogger I recognize how much work goes into making them.
okay i must admit that, u r amazing, i hv been coding for almost a year now (not much i know) but built few apps alrdy, but once i saw ur video i knew i'm missing few things and also did some mistakes with these apps, and gotta say also ur teaching is awesome, hope u and ur channel best of luck, ty
Best Video to learn about useEffect
Gold mine of knowledge thats even for free... ! Highly appreciated sir
Very nice and informative video. Also, encourage people to be not afraid of useEffect. But also promotes critical thinking.
I agree! 😉
Excellent Video Jack thanks.
Am going to tear all my hair out working with this useEffect .😱
I love how knowledgeable you are in React and state management and how you make complex stuff easy to understand. I wish you had a comprehensive React course. I would have definitely bought it in the blink of an eye.
I have a react and typescript playlist for free which is pretty comprehensive.
@@jherrwhere man I want to buy
Amazing video, Jack! You're very knowledgeable and underrated. Keep creating!! 🔥
Really helpful Man, I appreciate your videos that has quality content and eloquent explaination of process. Thank you so much.
Now we are talking, thanks Jack. loved this. we need some advanced stuff on react :)
Awesome jack. Got clear idea of useEffect now. Thanks.
Jack, this is extremely well done, thank you for this!
I am glad that I discovered this channel, thanks a lot Sir for your passion to educate people and making our community better
Hello Sir. Love from India i love your content. It just great to have that much of insight of React there thanks fro creating such type of content.
Jack, can you please make a video on how to set up VSCode for React development? You are an excellent expert in both!
I'm so happy I'm using reagent which has absolutely none of these problems
Why I didn't know about this channel before? ... I mean you're an awesome instructor!! I enjoyed this video so much and I learned a lot!! Thanks so much for this great content, you just got a new suscriber! 🥳
Thank you Jack! Amazing explanation
So one of these for all the important ones plz!
Excellent video as usual, Jack !
Thank you for such great insights and tricks. Lot of respect and a BIG THANK YOU.
Awesome video! finally a video that covers them well.
Your content is amazing as always! Thanks for doing what you do!
Wow this tutorial is awesome. This is a very deep explanation. Worth watching it. 😍
You are beyond amazing! Thank you so much for this tutorial!
Excellent material!
Always been a fan of your tutorials
When you've put the useFetch inside the useEffect I've already knew it would loop because useEffect is activated at every rendering, if you don't condition or apply that last array parameter, it will loop everytime.
Thank you for your valuable effort Jack 👏
The part of the video between 3:51 and 5:20 explains very well the render and re-render lifecycle. I urge anyone who is still a bit nervous about useEffect to watch and rewatch this section til it sticks. I had to draw a diagram to explain to myself what was happening at each step.
Also, if you're using console.log within the useEffect hook, don't forget to make sure that there isn't a React.StrictMode component within the index.js file.
Incredibly valuable again Jack. Thank you 🙏
Superb tutorial! I wish I found you sooner.
This content is gold. 💯
I agree! 😉
Great explained, thank you Jack!
Loved the video thank you!
Grrrrrreat explanation, as always! Thanks Jack!
Awesome master class! Could you please tell me what VSCode extensions you used for the following in the video:
- the font styles
- the code suggestions
- the theme
I just want to know, which code suggestions plugin he using. Have you figured it out already?
@@ajithsimon No, I haven't yet
One thing that's helpful when thinking about useEffect is that it's like a callback.. and it's gonna get called by react AFTER the component function ENDs.
Really helpful Jack
You ARE good story teller!!
Thanks ❤️
Hi Jack. Thanks for the videos. May I ask, how did you create that terminal logo.?
That's Sixel graphics. It's really cool: th-cam.com/video/apg9XR35pAM/w-d-xo.html
Very informative and well explained video. Thank you so much
Amazing job so many light bulbs went off after watching this turtotial.
What an informative uncle
It's great explanation, sir :)
I came here for copper but I found gold
You just got a SUBSCRIBED
Excellent video Jack.
Hi Jack! I love these videos, now I really understand useEffect. Can you explain a bit more about 17:18 on what you mean when using useRef with useLayoutEffect in terms of 'change this later on'?
So useLayouEffect is an effect that gets run synchronously after the render completes. Honestly the best thing to do here is just to remove the useLayoutEffect and set the ref.current unconditionally right after the useRef call. It's zero cost to do that and there is no potential issue with re-renders since setting a ref does not force a re-render.
@@jherr Awesome, thank you!
Thank you so much for the video! Very Useful! :)
I'm starting to turn the corner with react. I think it has served me very well, but it's time to get back to basics.
Feel I mirror some others here but I feel pretty good with react but damn, that use callback ref in particular is an interesting one actually
Great informative video! I didn't forget to subscribe this time. Thank you!
Great video! The useEffect dependency warnings are just too damn annoying. Sometimes you know what you're doing and that you're specifically watching just one piece of state, but it still wants you to add extra dependencies which, if you add, turn into bugs. Then you gotta keep adding ignore lines to make things work the way you want to.
Sometimes you just need to ignore something
This is just what I needed, thanks a ton!
This got very convoluted very quickly. Especially with the need for 4 other hooks to get it to work as intended. Will probably need to watch this a few more times to fully grasp what is going on.
It really highlights the weakness of React. I’ve never had to worry about this low level stuff in other frameworks. I’d prefer magic to this any day.
simply awesome
I love this so much
Why not just use useCallback in the parent component instead of implementing a callback ref on your own?
That would depend on the caller to ensure that the function of the custom hook is correct. IMHO it's better before the hook to ensure that its own dependency behavior is correct regardless of the the parameters sent to the function.
Thank you, Jack; I appreciate you for creating these fantastic videos. Can I ask you what tool you've used for code suggestions?
Github Copilot.
Jack, how do you annotate on your macbook screen like that? Is that an app for ipad?
I use screenBrush and a cheapy drawing tablet.
Fantastic explanation!! I did find your head blocks the code too much at times. Perhaps shrink the size and scroll up sometimes to show the details.