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.
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…
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.
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 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.
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
Kudos to UA-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!!
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.
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.
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.
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.
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 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 🇹🇿
I am using useeffect on a Suspended component , this useeffect is supposed to access a hash #id from the url to get the id of an element , fetch the element from the document using the id and scrolling to it. However when I use "Suspense" to show a fallback while the component is being rendered my useEffect applies on the fallback so it never finds the element 😢 please help !!!!
@@jherr please give me your email I can send you a screenshot , i have been looking for a solution for a long time , it’s weird that no one has faced it before , well there fetch-while-rendering methods for Suspense , but what if I am using useEffect for an animation like scrolling to an item and not a data fetch …
@@mohamedamine2714 Please use the Discord server for your question and please do NOT put up a screenshot. Screenshots of code are useless for helping people work through issues. Read the #rules in detail before posting and structure your question according to the #rules.
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 think your distinction between useEffect() and useLayoutEffect() is erroneous. The important distinction is that it “fires synchronously AFTER ALL DOM MUTATIONS” (my emphasis). That is, you can look at the screen as it laid out and make changes if necessary. For what you are doing, which has nothing to do with the DOM, you could just use useEffect().
Fantastic video about useEffect and dependencies , it would be great if you do not cover the editor with the face, it is the second time that i can not see the 100% of the code. A part from that, hands down to this master piece!
Exactly we can't see your code. And please go slowly because you are really covering deep concepts that we are aware of. You are teaching well but go in an organized manner. Please don't rush.
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.
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 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
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.
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.
depCompare is removing the first level of reference check, the reference to the dependency array itself. Within the array it does a === check on each item in the array, which is either a value check for primitives, or a reference check for functions, arrays and objects.
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.
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.
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.
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.
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.
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.
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! 🥳
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.
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
I think I have in more recent videos. That being said, there is a playback speed control with UA-cam videos as well as the scrubber control you can use to navigate backward to replay segments.
Sorry about that. I recommend trying all this stuff yourself to experiment and get some experience with it, then re-watch to see if it makes more sense.
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.
24:44 yellow squiggly line under [ ]: I imagine this is lint saying that your useEffect is missing dependencies like setCount and count. Is it possible to always write useEffect to pass `react-hooks/exhaustive-deps`, or should we ignore it?
Awesome video......really great information....... I feel I dont know anything when i watch your videos.......and your deep understanding helps remove some of that unknown. I have a question as to how the set interval keeps going even though the useEffect gets called only once...... I know once the count state changes that triggers a rerender......but without the useEffect getting called how is the setInterval getting triggered again and again
I'm not sure I understand the question, setInterval is self-triggering. And you 1) want to make sure that you only start a setInterval as few times as possible, preferably just once, and 2) that you clear the interval when the component unmounts or before you start setInterval again. Maybe you are thinking about setTimeout? That needs to be triggered every time to get the callback.
@@jherr oh man!! You are absolutely right, I am thinking about setTimeout..... Thank you so much......this question had been bugging since i watched the 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!
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.
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…
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
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!
Thought about skipping this video came to know much is yet to explore what a gem thanks 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!
So amazing that you explain all aspects of a feature deep and complete like this
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 ;)
thanks. very informative video with many useful densely packed topics.
What an awesome explanation of the react useEffect hook. Many thanks!
Awesome jack. Got clear idea of useEffect now. Thanks.
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 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
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
So much value in one video!
Kudos to UA-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!!
You are beyond amazing! Thank you so much for this tutorial!
Best indepth and easy to understand explaination. Thanks for sharing.
Your content is amazing as always! Thanks for doing what you do!
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!
Hi Jack. Thanks for the videos. May I ask, how did you create that terminal logo.?
That's Sixel graphics. It's really cool: ua-cam.com/video/apg9XR35pAM/v-deo.html
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.
Jack, can you please make a video on how to set up VSCode for React development? You are an excellent expert in both!
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 useCallbackRef pattern is EXACTLY what I was missing in my mental puzzle to properly memoize passed functions. Thanks 🙏
I like that exponential speeding counter 🤣
I love this so much
simply awesome
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.
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.
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 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 🇹🇿
I'm so happy I'm using reagent which has absolutely none of these problems
I am using useeffect on a Suspended component , this useeffect is supposed to access a hash #id from the url to get the id of an element , fetch the element from the document using the id and scrolling to it. However when I use "Suspense" to show a fallback while the component is being rendered my useEffect applies on the fallback so it never finds the element 😢 please help !!!!
I haven't tried that, but it seems like you should be using a useRef in addition to your useEffect.
@@jherr please give me your email I can send you a screenshot , i have been looking for a solution for a long time , it’s weird that no one has faced it before , well there fetch-while-rendering methods for Suspense , but what if I am using useEffect for an animation like scrolling to an item and not a data fetch …
@@mohamedamine2714 Please use the Discord server for your question and please do NOT put up a screenshot. Screenshots of code are useless for helping people work through issues. Read the #rules in detail before posting and structure your question according to the #rules.
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
I think your distinction between useEffect() and useLayoutEffect() is erroneous. The important distinction is that it “fires synchronously AFTER ALL DOM MUTATIONS” (my emphasis). That is, you can look at the screen as it laid out and make changes if necessary.
For what you are doing, which has nothing to do with the DOM, you could just use useEffect().
Fair enough.
This video literally cleared up a lot of confusions. Really grateful. This video is a gem 💎
Fantastic video about useEffect and dependencies , it would be great if you do not cover the editor with the face, it is the second time that i can not see the 100% of the code. A part from that, hands down to this master piece!
Exactly we can't see your code. And please go slowly because you are really covering deep concepts that we are aware of. You are teaching well but go in an organized manner. Please don't rush.
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!
Thank you ☺️
omg every useEffect tutorial that I watch uses something I don't know. Now I need to learn fetch.... ffs.
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.
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.
Thank you sir very helpful
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.
A season mastering for all hooks please! Thank you for this vid! Much appreciatted
Thank you so much for this. I've been struggling with this for weeks!
I came here for copper but I found gold
You just got a SUBSCRIBED
15:03, i always do that, but i don't know, the eslint warnings always keep me anxious about that i'm coding bad
hands down the best teacher of React. I kid you not !!!
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
Very nice and informative video. Also, encourage people to be not afraid of useEffect. But also promotes critical thinking.
I agree! 😉
It would have been nice to start with a "what is useEffect" and "when to use useEffect" for beginners.
this is a very useful video. but sometimes your head prevent me from watching the hole code :)
Best explanation of useEffect I have ever seen. Thanks so much!
You're the man Jack!
very clear and an in depth uses of some of react hooks, thanks Mr. Jack as a usual!
Great video! But your face is too big and is blocking the code. lol
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
Thanks!
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!
Absolutely best explanation about how useEffect dependencies work! 🔥🔥🔥
This shows that I should stop using useeffect for fetching :DD
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.
thanks so much for this but one question @11:43 I thought depCompare was evaluating the items within the objects, NOT the reference?
depCompare is removing the first level of reference check, the reference to the dependency array itself. Within the array it does a === check on each item in the array, which is either a value check for primitives, or a reference check for functions, arrays and objects.
I just wanna ask "How to be as good as you" in programming?
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.
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!
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.
more console logging with more explanations would be really helpful... And your head is blocking some of the code.
The syntax was myObject.method?.()
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.
Cool, thanks. Do you have a playlist for these "Mastering React' ... " videos?
I should! I'll get on that.
Do we really need useLayoutEffect to set the ref's current? Can't we just simply assign it in the next line?
You can. You are correct. My bad on that one.
When a “Mastering useCallback”?
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.
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.
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! 🥳
Interesting, thanks.
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.
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
Fantastic explanation of a sometimes frustrating hook in React, definitely bookmarking this one!
I would appreciate it if you take thing slower . and repeat the example multiple times before you go to the next step
I think I have in more recent videos. That being said, there is a playback speed control with UA-cam videos as well as the scrubber control you can use to navigate backward to replay segments.
*Facebook 1 year later*
Haha depreciation goes brrrrrr
you started easy and l liked the dumb down version but then you took off to some realms that takes me to re-watch and still not grasp
Sorry about that. I recommend trying all this stuff yourself to experiment and get some experience with it, then re-watch to see if it makes more sense.
Great informative video! I didn't forget to subscribe this time. Thank you!
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 🤣🤣
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.
Amazing job so many light bulbs went off after watching this turtotial.
24:44 yellow squiggly line under [ ]: I imagine this is lint saying that your useEffect is missing dependencies like setCount and count. Is it possible to always write useEffect to pass `react-hooks/exhaustive-deps`, or should we ignore it?
You should definitely NOT ignore or disable exhaustive-deps. I've seen a bunch of bugs where I saw that folks had disabled that lint rule and boom.
@@jherr Have you done a video about that issue? I am having trouble refactoring old code that fails this lint rule.
Am I the only one feeling like a dumb. I must watch this 9999 times more. :)
Thank you for such great insights and tricks. Lot of respect and a BIG THANK YOU.
Awesome video......really great information.......
I feel I dont know anything when i watch your videos.......and your deep understanding helps remove some of that unknown.
I have a question as to how the set interval keeps going even though the useEffect gets called only once......
I know once the count state changes that triggers a rerender......but without the useEffect getting called how is the setInterval getting triggered again and again
I'm not sure I understand the question, setInterval is self-triggering. And you 1) want to make sure that you only start a setInterval as few times as possible, preferably just once, and 2) that you clear the interval when the component unmounts or before you start setInterval again.
Maybe you are thinking about setTimeout? That needs to be triggered every time to get the callback.
@@jherr oh man!!
You are absolutely right, I am thinking about setTimeout.....
Thank you so much......this question had been bugging since i watched the video
Great content, as usual, Jack. What extension completes your code suggestions, tabNine or CoPilot? I wonder, master
Copilot
Really helpful Man, I appreciate your videos that has quality content and eloquent explaination of process. Thank you so much.
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!
Quality video as always Jack! Now I know I never understood useEffect dependency till I watched this video
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!