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!!
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…
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 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.
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
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.
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!
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.
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 🇹🇿
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 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!
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.
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 ;)
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.
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.
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 :)
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!
Hi Jack, I'm wondering in the callback dependency section, if the incoming callback is memoized with useCallback and then just put the callback as the effect dependency, rather than saving callback with ref inside the custom hooks, what do you think? Thankyou 🙏
If the incoming callback is the dependency then that dependency would fire every time, setting the local useCallback callback every time and that would be a no-op. So there would be no advantage. But you should try it for yourself and see.
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.
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!
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
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.
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
Hi @Jack Herrinton I wanted to ask, can we write expressions within the dependency array? For example [array && array.name] ? or [array.year > 2023] ? If we put on the dependency array expessions like blockArray && blockArray.name will this make react to separate the two (watch for backArray and also blockArray.name) or will look to it as one only condition?
Another great question! You can absolutely use conditional expressions in dependency arrays. In the latter case I would use blockArray?.name which is a twofer, it checks if blockArray is non-null AND that blockArray.name is non null.
@@jherr Thanks a lot. Your are doing a great job, great contents - easy to understand, also - taking time to answer our questions here in chat, hope I had a teacher like you.
Sir, will you please explain why count was showing at 24:38 but the Count shown in browser was updating. Isn't both of those using same local variable??
Nope. Count is captured at the starting value when the closure is first created. And since the closure is not re-created on each render it stays at its initial value of zero.
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.
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
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
Jack, do you have the slightest idea on why my fetch api call with [ ] zero dependencies & one setState (saving the data) causes my app to return the data ..and 2 milliseconds later re-render again & return undefined?
You should post a codesandbox that demonstrates the issue on my Discord server (discord.gg/nyaBeS2M) in the #react channel. Be sure to follow the #rules before posting.
Hi, thank you for your videos 🙏🏻 could you explain what’s the difference between synchronous and asynchronous calls in the context of component render lifecycle? I don’t get how useEffect and useLayoutEffect are different 🤔
useEffect registers a function that is called asynchronously by React when the dependency array changes from its previous state. useLayoutEffect registers a function that is called synchronously after the DOM has been rendered.
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.
18:48 What is the difference between the useCallbackRef function you created and the useCallback from React itself? Wouldnt useCallback be enough here?
Using useCallback would wrap the incoming function reference in a new reference and then you'd have to depend on that reference or you would have the same stale callback reference problem. Using useCallbackRef keeps the base useRef reference constant and then the current can change to look at the latest reference.
I am a little bit confused about writing clean up function at 20:29. Isn't that function supposed to come after the if condition right before the end of the function inside useEffect or can we return clean up function from anywhere inside the useEffect function.
HI Jack, thank you. is there a reason why the warning log below is popping? I downloaded the same code from Github and ran it without changing the code. WARNING in src\useFetch.js Line 32:6: React Hook useEffect has a missing dependency: 'savedOnSuccess'. Either include it or remove the dependency array
Ah, yeah, that's because eslint is doing a pretty simplistic evaluation of what you are using in the useEffect. Anywho, feel free to add it. The base reference to a useRef will never change. So you can safely add it as a dependency and it will never fire. Depending on `myRef.current` however, is a different story.
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!!
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…
The useCallbackRef pattern is EXACTLY what I was missing in my mental puzzle to properly memoize passed functions. Thanks 🙏
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.
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!
Absolutely best explanation about how useEffect dependencies work! 🔥🔥🔥
hands down the best teacher of React. I kid you not !!!
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!
So amazing that you explain all aspects of a feature deep and complete like this
Thought about skipping this video came to know much is yet to explore what a gem thanks jack
The stopwatch example was mind blowing, thank you, for the good work !
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 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
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.
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!
This video literally cleared up a lot of confusions. Really grateful. This video is a gem 💎
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.
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 🇹🇿
Thank you so much for this. I've been struggling with this for weeks!
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 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 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!
The way you explain these topics is amazing
very clear and an in depth uses of some of react hooks, thanks Mr. Jack as a usual!
really help a lot! This is most deep dive video , I ever seen in coding journey
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.
Fantastic explanation of a sometimes frustrating hook in React, definitely bookmarking this one!
Jack, can you please make a video on how to set up VSCode for React development? You are an excellent expert in both!
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 ;)
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.
I'm so happy I'm using reagent which has absolutely none of these problems
A season mastering for all hooks please! Thank you for this vid! Much appreciatted
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
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 :)
I've seen seasoned developers make the mistakes you've shown in the video. Thanks a million for this! I'm a big fan
What an awesome explanation of the react useEffect hook. Many thanks!
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!
Very nice and informative video. Also, encourage people to be not afraid of useEffect. But also promotes critical thinking.
I agree! 😉
Just discovered your channel now, and I'm very impressed with the lucidity of your explanations!
Hi Jack, I'm wondering in the callback dependency section, if the incoming callback is memoized with useCallback and then just put the callback as the effect dependency, rather than saving callback with ref inside the custom hooks, what do you think? Thankyou 🙏
If the incoming callback is the dependency then that dependency would fire every time, setting the local useCallback callback every time and that would be a no-op. So there would be no advantage. But you should try it for yourself and see.
Best channel I've found so far!! Thank you so much!!
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.
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!
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
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
Awesome jack. Got clear idea of useEffect now. Thanks.
Thank you for the video! I'd been having trouble on a project recently, but I realize now what I'd been doing wrong!
Gold mine of knowledge thats even for free... ! Highly appreciated sir
Your videos actually helped me a few times at work. Hope you'll keep up uploading
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
So much value in one video!
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
thanks. very informative video with many useful densely packed topics.
Best indepth and easy to understand explaination. Thanks for sharing.
Woow blown away but the explanation, use case etc. Keep up the good work!!!
This content is gold. 💯
I agree! 😉
Thank you Jack! Amazing explanation
Hi @Jack Herrinton
I wanted to ask, can we write expressions within the dependency array?
For example [array && array.name] ? or [array.year > 2023] ?
If we put on the dependency array expessions like blockArray && blockArray.name will this make react to separate the two (watch for backArray and also blockArray.name) or will look to it as one only condition?
Another great question! You can absolutely use conditional expressions in dependency arrays. In the latter case I would use blockArray?.name which is a twofer, it checks if blockArray is non-null AND that blockArray.name is non null.
@@jherr Thanks a lot. Your are doing a great job, great contents - easy to understand, also - taking time to answer our questions here in chat, hope I had a teacher like you.
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.
I am glad that I discovered this channel, thanks a lot Sir for your passion to educate people and making our community better
Jack, this is extremely well done, thank you for this!
You are beyond amazing! Thank you so much for this tutorial!
Really helpful Man, I appreciate your videos that has quality content and eloquent explaination of process. Thank you so much.
Sir, will you please explain why count was showing at 24:38 but the Count shown in browser was updating. Isn't both of those using same local variable??
Nope. Count is captured at the starting value when the closure is first created. And since the closure is not re-created on each render it stays at its initial value of zero.
Best Video to learn about useEffect
Thank you for such great insights and tricks. Lot of respect and a BIG THANK YOU.
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 for your valuable effort Jack 👏
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
Amazing job so many light bulbs went off after watching this turtotial.
Wow this tutorial is awesome. This is a very deep explanation. Worth watching it. 😍
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.
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
Jack, do you have the slightest idea on why my fetch api call with [ ] zero dependencies & one setState (saving the data) causes my app to return the data ..and 2 milliseconds later re-render again & return undefined?
You should post a codesandbox that demonstrates the issue on my Discord server (discord.gg/nyaBeS2M) in the #react channel. Be sure to follow the #rules before posting.
Hi, thank you for your videos 🙏🏻 could you explain what’s the difference between synchronous and asynchronous calls in the context of component render lifecycle? I don’t get how useEffect and useLayoutEffect are different 🤔
useEffect registers a function that is called asynchronously by React when the dependency array changes from its previous state. useLayoutEffect registers a function that is called synchronously after the DOM has been rendered.
Great content, as usual, Jack. What extension completes your code suggestions, tabNine or CoPilot? I wonder, master
Copilot
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.
Quality video as always Jack! Now I know I never understood useEffect dependency till I watched this video
18:48 What is the difference between the useCallbackRef function you created and the useCallback from React itself? Wouldnt useCallback be enough here?
Using useCallback would wrap the incoming function reference in a new reference and then you'd have to depend on that reference or you would have the same stale callback reference problem. Using useCallbackRef keeps the base useRef reference constant and then the current can change to look at the latest reference.
Great explained, thank you Jack!
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.
Always been a fan of your tutorials
18:04 Thanks for great video but can the combo of `useRef` + `useLayoutEffect` be replaced by `useCallback` hook?
Now we are talking, thanks Jack. loved this. we need some advanced stuff on react :)
Very informative and well explained video. Thank you so much
I am a little bit confused about writing clean up function at 20:29. Isn't that function supposed to come after the if condition right before the end of the function inside useEffect or can we return clean up function from anywhere inside the useEffect function.
You can return from wherever you like in a function.
Your content is amazing as always! Thanks for doing what you do!
Amazing video, Jack! You're very knowledgeable and underrated. Keep creating!! 🔥
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.
Grrrrrreat explanation, as always! Thanks Jack!
Superb tutorial! I wish I found you sooner.
Hi Jack, thank you for this explanation. How app do you use to draw on the screen? Would like to try something similar for pair programming.
I use screenBrush for that, along with a commodity drawing tablet from Gaomon.
@@jherr Thank you!
You ARE good story teller!!
Thanks ❤️
Thank you so much for the video! Very Useful! :)
Excellent Video Jack thanks.
HI Jack, thank you.
is there a reason why the warning log below is popping? I downloaded the same code from Github and ran it without changing the code.
WARNING in src\useFetch.js
Line 32:6: React Hook useEffect has a missing dependency: 'savedOnSuccess'. Either include it or remove the dependency array
Ah, yeah, that's because eslint is doing a pretty simplistic evaluation of what you are using in the useEffect. Anywho, feel free to add it. The base reference to a useRef will never change. So you can safely add it as a dependency and it will never fire. Depending on `myRef.current` however, is a different story.
Thank you Jack!