One of the very best videos I have seen about React and JS, I'm sure a lot of developers have come across issues like these not knowing exactly the cause and what to do, I wish I had seen this a year ago lol, great stuff Dave keep it up!
If you're not careful, your React apps can suffer from performance issues when you have a function that takes a moment or two to complete processing. By applying the useMemo React hook, you can avoid this kind of processing bottleneck. Just starting with React? I recommend my full 9 hour React course tutorial video here: th-cam.com/video/RVFAyFWO4go/w-d-xo.html
Thank you very much. I had big trouble understanding the useCallback and useMemo hooks even though i have seen endless tutorials. But finally yours helped me understand it! I had big problem understanding if a usecallback should always be used alongside usememo. Now I finally understood
Really informative video, Things can get tricky if you don't know how React renders components, therefore, it important to choose dependencies carefully and think twice before deploying code to a production server, Thanks Dave,
I sincerely appreciate your efforts. The second use case of useMemo is explained very clearly without using React.memo(). Thank you very much🙂. I had a doubt when you were explaining that useEffect(( )=>clg('New Number), fib) was not executed again because fib is a primitive type and hence fib is the same during every render of the FC. I thought it was not executed because fib's value is not changing when we enter the value for randomInput. But I have better understanding then before thank you very much again🙂🙂🙂🙂🙂🙂🙂🙂
Great tutorial!! It might be stupid question but I don't get why fib function doesn't need dependency. we don't need to put 'n' in dependency? const fib = useCallback((n) => { return (n
useCallback provides a memoized function. It is not calling the function and therefore n is a parameter placeholder and not a value at this point. We apply useCallback to avoid redefining a function on every render. useMemo does call a function. Note the userNumber argument needs to be in the dep. array for useMemo.
Is there a reason that the fib function is in the dependency array of useMemo and not useCallback? I can see the computed value "userNumber" being in the dependency array of useMemo, but why is the function there also?
Hey Dave, great video, I just have one question. When you move fib from outside the component to in the component, why do you have to add fib to the dependencies of the useMemo call? That function is in scope for the function passed to useMemo and fib is never going to change, so can you leave it out of the dependencies of the useMemo call?
Good question, Paul! When defined inside the functional component, the function will always be created again. It looks the same to us, but it will not have the same memory reference. I'm referring to what is called referential equality. This applies to objects, arrays, and functions. Therefore, we memoize the function with useCallback. Now it should have referential equality, but it is still a dependency of useMemo when we create the fib number. You will get a warning/complaint in your console from React if you do not add it to the dependency array. Of course, you could ignore that or put in a comment to disable the eslint for the next line.
So, if an function is defined in a separate file and is used in a component then there is no need to use useCallback hook. Right? Then what is the practical use case of useCallback?
in the '80s, when people wrote BASIC, they had this GOTO statement and people call it spaghetti code, and they got rid of it forever, saying NEVER do that. We are now entering a new era where we need to "memo" a function, and figure out "the dependencies", wow, that's spectacular programming, even more great than "spaghetti"
One of the very best videos I have seen about React and JS, I'm sure a lot of developers have come across issues like these not knowing exactly the cause and what to do, I wish I had seen this a year ago lol, great stuff Dave keep it up!
Thank you Sergio! I'm glad you liked it 💯🚀
If you're not careful, your React apps can suffer from performance issues when you have a function that takes a moment or two to complete processing. By applying the useMemo React hook, you can avoid this kind of processing bottleneck. Just starting with React? I recommend my full 9 hour React course tutorial video here: th-cam.com/video/RVFAyFWO4go/w-d-xo.html
you are literally the best javascript teacher on youtube or udemy or online , in few minutes you taught what others teach in 1 hour
Still can't believe this is a free course !!! Dave, you are an outstanding teacher !!!
Thank you, Nemanja! 🙏
Thanks man I got fullstack developer job because of you, I just can't thank you enough
Love to hear this kind of feedback! Congrats!!! 💯🚀🙌
Thank you very much. I had big trouble understanding the useCallback and useMemo hooks even though i have seen endless tutorials.
But finally yours helped me understand it!
I had big problem understanding if a usecallback should always be used alongside usememo. Now I finally understood
That's really awesome. Anyone can understand the real difference between useMemo and useCallback. Thanks a lot Dave😍😍
You're welcome! 💯
Really informative video,
Things can get tricky if you don't know how React renders components,
therefore, it important to choose dependencies carefully and think twice before deploying code to a production server,
Thanks Dave,
You're welcome Ahmad. I'm glad to see your comment 🙏
@@DaveGrayTeachesCode I couldn't resist,
with all of my troubles your videos keep challenging me,
Have a nice day my friend
This is an important advanced stuff for anyone who develope a largre react app
Absolutely! 💯
This is one of the best explanations on what useMemo and useCallback are. You did an excellent job with this video - thanks!
You're very welcome! 💯
Thanks so much Dave for your great lessons. Your explanations make it possible for a nub to get it.
you're the best tech teacher in youtube!
Thank you for the kind words!
Good example Dave, immediately understood the use of UseMemo.
Glad to hear that!
The best video i could find on this topic. After a few days of searching, finally i could undestand. Thansk a lot mr dave ♥️🙏
Glad I could help!
always you are the best for explained some tutorial.Thanks dave
Thanks for the great content as always! Really like the way you explain things, especially with the examples you gave :D
You're welcome! Thank you for the kind words 🙏💯
subbing because your teaching style is lovely. thank you for your great work Dave!
Welcome aboard!
I sincerely appreciate your efforts. The second use case of useMemo is explained very clearly without using React.memo(). Thank you very much🙂. I had a doubt when you were explaining that useEffect(( )=>clg('New Number), fib) was not executed again because fib is a primitive type and hence fib is the same during every render of the FC. I thought it was not executed because fib's value is not changing when we enter the value for randomInput. But I have better understanding then before thank you very much again🙂🙂🙂🙂🙂🙂🙂🙂
You're welcome! 💯
Thank you very much Mr.Dave
You are very welcome, Mostafa!
Thanks for the clear explanation!
Glad it was helpful!
Clear explanation. Able to understand the real usage. Thanks alot
Glad it was helpful! 💯
Another great tutorial explaining React concepts, useMemo() in this case. Thanks, Dave
{2022-10-19}
You're welcome!
Hey form Algeria , you are doing a great work , keepit that way
Thank you! 🙏💯
Best tutor ever!
Thank you! 🙏
Thank you! Such good explanations and examples
You're welcome! I'm glad it was helpful!
Piece of gem. Nice explaination.
Thank you Appu!
You are a legend 🙏🙏
Thank you so much.
Love your tutorials. 😍😍
Thank you!
Great tutorial!! It might be stupid question but I don't get why fib function doesn't need dependency. we don't need to put 'n' in dependency?
const fib = useCallback((n) => {
return (n
useCallback provides a memoized function. It is not calling the function and therefore n is a parameter placeholder and not a value at this point. We apply useCallback to avoid redefining a function on every render. useMemo does call a function. Note the userNumber argument needs to be in the dep. array for useMemo.
Great video!
Thanks!
Thank you for that video! :-)
You're welcome!
Thank you for this amazing tutorial.
You're very welcome! 💯
Great video, very easy to understand
Glad it helped! 🚀
This is awesome!
Glad to hear that!
very helpfull thank you so much
You're welcome!
Is there a reason that the fib function is in the dependency array of useMemo and not useCallback? I can see the computed value "userNumber" being in the dependency array of useMemo, but why is the function there also?
I wondered this too - I know its inside the function but it seems it is entirely static so why would it need to be regarded as a dependency?
Hey Dave, great video, I just have one question. When you move fib from outside the component to in the component, why do you have to add fib to the dependencies of the useMemo call? That function is in scope for the function passed to useMemo and fib is never going to change, so can you leave it out of the dependencies of the useMemo call?
Good question, Paul! When defined inside the functional component, the function will always be created again. It looks the same to us, but it will not have the same memory reference. I'm referring to what is called referential equality. This applies to objects, arrays, and functions. Therefore, we memoize the function with useCallback. Now it should have referential equality, but it is still a dependency of useMemo when we create the fib number. You will get a warning/complaint in your console from React if you do not add it to the dependency array. Of course, you could ignore that or put in a comment to disable the eslint for the next line.
Thanks
So, if an function is defined in a separate file and is used in a component then there is no need to use useCallback hook. Right?
Then what is the practical use case of useCallback?
This video is about useMemo, but for your questions about useCallback, I have a video here: th-cam.com/video/FB_kOSHk1DM/w-d-xo.html
Great explaination.👌
Thank you! 💯
Good stuff. Thanks from Ukraine.)
Welcome and hello to Ukraine! 👋
Nice one
Thanks!
Hi Dave, do you run online courses on Udemy?
No, but I do hope to release my own premium content in the future. I don't think I will use Udemy to release it though.
🤩🤩
in the '80s, when people wrote BASIC, they had this GOTO statement and people call it spaghetti code, and they got rid of it forever, saying NEVER do that. We are now entering a new era where we need to "memo" a function, and figure out "the dependencies", wow, that's spectacular programming, even more great than "spaghetti"
tnx sir
You're welcome!
Do You Know that you are the best & special ?
Thank you!
nice introduction lol