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.
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…
Kudos to RUclips 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!!
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;
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
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 🇹🇿
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.
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 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.
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.
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.
This is the best piece of content on useEffect I have seen so far. It's so clear conceptually and pratically on point. I legit feel more confident using useEffect now, I get it!! Thank you Jack!
I'm a big fan of all your tutorials about React, you are an excellent teacher! If you're interested I (and the community I'm sure) would appreciate to have a dedicated video on useRef fundamentals, behavior and use cases!
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.
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!
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!
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.
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
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.
Bro u r such a great teacher..do more like this..deep analysis and getting sorting outing new things in a small small tricks it's cool..❤❤❤ love u..need more on react js jack
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.
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.
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! 🥳
First of all. I love your videos, your teaching is very straight forward and thorough. Second, what is that font you are using? It's wild, but I feel like I would love it
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.
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
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
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…
Kudos to RUclips 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 🙏
This is one of the best break downs of a hook I have seen, hope to see more like this.
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!
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.
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
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 🇹🇿
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.
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.
The stopwatch example was mind blowing, thank you, for the good work !
hands down the best teacher of React. I kid you not !!!
Absolutely best explanation about how useEffect dependencies work! 🔥🔥🔥
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!
Thought about skipping this video came to know much is yet to explore what a gem thanks jack
Amazing job so many light bulbs went off after watching this turtotial.
I had a bug in my user profile's form, but when I found this I knew the solution was here. I watched it carefuly and found the solution. Great video!
Thank you so much for this. I've been struggling with this for weeks!
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.
This video literally cleared up a lot of confusions. Really grateful. This video is a gem 💎
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.
A season mastering for all hooks please! Thank you for this vid! Much appreciatted
This is the best piece of content on useEffect I have seen so far. It's so clear conceptually and pratically on point. I legit feel more confident using useEffect now, I get it!!
Thank you Jack!
I'm so happy I'm using reagent which has absolutely none of these problems
very clear and an in depth uses of some of react hooks, thanks Mr. Jack as a usual!
Fantastic explanation of a sometimes frustrating hook in React, definitely bookmarking this one!
I'm a big fan of all your tutorials about React, you are an excellent teacher! If you're interested I (and the community I'm sure) would appreciate to have a dedicated video on useRef fundamentals, behavior and use cases!
really help a lot! This is most deep dive video , I ever seen in coding journey
I've seen seasoned developers make the mistakes you've shown in the video. Thanks a million for this! I'm a big fan
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.
The way you explain these topics is amazing
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.
Jack, can you please make a video on how to set up VSCode for React development? You are an excellent expert in both!
Am going to tear all my hair out working with this useEffect .😱
Thank you for the video! I'd been having trouble on a project recently, but I realize now what I'd been doing wrong!
thanks. very informative video with many useful densely packed topics.
Very nice and informative video. Also, encourage people to be not afraid of useEffect. But also promotes critical thinking.
I agree! 😉
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!
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 :)
Your videos actually helped me a few times at work. Hope you'll keep up uploading
Just discovered your channel now, and I'm very impressed with the lucidity of your explanations!
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 ;)
Best channel I've found so far!! Thank you so much!!
Best Video to learn about useEffect
Excellent Video Jack thanks.
So much value in one video!
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!
Now we are talking, thanks Jack. loved this. we need some advanced stuff on react :)
Gold mine of knowledge thats even for free... ! Highly appreciated sir
Quality video as always Jack! Now I know I never understood useEffect dependency till I watched this video
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
What an awesome explanation of the react useEffect hook. Many thanks!
Woow blown away but the explanation, use case etc. Keep up the good work!!!
Awesome jack. Got clear idea of useEffect now. Thanks.
Jack, this is extremely well done, thank you for this!
What an informative uncle
Amazing video, Jack! You're very knowledgeable and underrated. Keep creating!! 🔥
I came here for copper but I found gold
You just got a SUBSCRIBED
So one of these for all the important ones plz!
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
Really helpful Man, I appreciate your videos that has quality content and eloquent explaination of process. Thank you so much.
Excellent video as usual, Jack !
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.
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
Bro u r such a great teacher..do more like this..deep analysis and getting sorting outing new things in a small small tricks it's cool..❤❤❤ love u..need more on react js jack
Thank you Jack! Amazing explanation
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.
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
Excellent material!
Best indepth and easy to understand explaination. Thanks for sharing.
Really helpful Jack
This content is gold. 💯
I agree! 😉
Awesome video! finally a video that covers them well.
This guy is the “Mr Rogers” of coding front end in React 🧑🏽💻🧣🧥👖
Your content is amazing as always! Thanks for doing what you do!
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.
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.
Superb tutorial! I wish I found you sooner.
Thank you for your valuable effort Jack 👏
Always been a fan of your tutorials
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! 🥳
Incredibly valuable again Jack. Thank you 🙏
Wow this tutorial is awesome. This is a very deep explanation. Worth watching it. 😍
Great explained, thank you Jack!
Thank you for such great insights and tricks. Lot of respect and a BIG THANK YOU.
First of all. I love your videos, your teaching is very straight forward and thorough.
Second, what is that font you are using? It's wild, but I feel like I would love it
JETBrains Mono or Operator Mono, depends on the video
I already knew this but thought I'd watch anyway... still beneficial as it reassures me that I'm doing them right to some degree 🤣🤣
You are beyond amazing! Thank you so much for this tutorial!
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.
I like that exponential speeding counter 🤣
Grrrrrreat explanation, as always! Thanks Jack!
It's great explanation, sir :)
Your the real fullStack
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
Loved the video thank you!
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: ruclips.net/video/apg9XR35pAM/видео.html