2 common use cases of useMemo: 1. When you want to make a slow function wrap inside useMemo so that doesn't re-compute every single time you render your component and it only computed when you acually need the value from that function since the inputs actually change 2. Whenever you want to make sure the reference of an object or an array is exactly the same as it was the last time you rendered if none of the internal workings changed, you're gonna want to useMemo here to make sure that you only update the reference of that object whenever the actual contents of the object change instead of updating every single time you render
I found 3 cases: 1. Memoizing props to prevent wasted renders 2. Memoizing values to avoid expensive re-calculation on every render 3. Memoizing values that are used in dependency array of another hook
@@ayeshasarwar615 i had the same question but sadly you can't, the variable would be defined INSIDE the useEffect hook and we won't be able to access it outside of it due to scoping
First thing I do to learn a new tech is see if you have a video on it already so I can learn it fast and easily! Thank you very much for helping developers like me out there. Best wishes!! :)
To be honest, after looking around youtube for some time, I was quite dissatisfied with the tutorials covering react hooks. I clicked on this video ready for another let down, but your video was great!! You cover topics clearly and concisely with a great balance between verbally explaining and showing your code. (I hope that made sense.) Gonna probably go through your whole hooks playlist now. Thanks a lot for the great video.
Thank you Kyle! My girlfriend refers to you as the robot guy. You are some kind of Terminator robot sent here from the future to help us with all of our programming needs.
Truly commendable. As far as the videos i have seen, none of the youTuber explained this. Thank you so much for explaining meticulously. God bless you.
Thanks for the video! Best useMemo tutorial I've seen. And that second use you explained at the end for useEffect with objects and arrays in the dependencies is awesome. I didn't know how to handle those cases.
Just a brilliant explanation, lots of thanks! My mentor told me to learn memoization, and after just 10 minutes of this video, I understood what it's for and how to use it.
Excellent tutorial, as always. Completely unrelated, but that audio artefact around 7:44 almost had me throw my headphones away again. That exact sound is what my headphones usually make when they break. Because I got distracted, I decided to rewind a few seconds to hear what you said, and the artefact was there at the exact same spot. That's when I realized it was the video and not my headphones -_- Yeah, I go through a lot of headphones, about 8-10 pairs per year. Always the left one going first, for some reason...
i literally been searching in udemy for a course that explain react hooks like this saw couple of videos but none of theme get to that great content quality feels guilty to get that for free thanks man
Key Differences - useMemo is used to memoize values. - useCallback is used to memoize functions. Usage: - Use useMemo when you have a computation that you want to avoid recalculating unless necessary. - Expensive calculations that don’t need to be recalculated every render. - Derived state that involves costly processing. - Large lists or data sets that require processing before rendering. - Passing objects or arrays as props to prevent unnecessary re-renders of child components. - Complex dependency arrays in hooks. - Use useCallback when you have a function that you want to avoid recreating unless necessary. Return Value: - useMemo returns the result of the computation. - useCallback returns the memoized function.
Sir Kyle, Friends, useMemo(()=>()=>()=>()=>someresult) works! If i am not wrong , useMemo executes not only the function passed to it ,but continues and executes the nested in function, nested in function, nested in function...function.
you are a legend Sir! going through a Meta certified frontend course and they did a pretty bad job at explaining memo, I already knew where I have to come to understand it better and I was correct.
Todo: 2:50 why does react seem to detect change in double number variable even though it’s not state? It doesn’t, but when the state changes the react component is re-rendered which means all the code inside our functional component runs again, so slow function is executed
These advanced Ract functions are really tricky to understand. You always come with concise videos that explains them really well. Thank you!
Agree 💯
Best useMemo introduction video I seen so far, Please cover more hooks
The amount of clarity Kyle gives while explaining complex concepts is truly unmatched, certainly my go to channel to learn tough concepts.
2 common use cases of useMemo:
1. When you want to make a slow function wrap inside useMemo so that doesn't re-compute every single time you render your component and it only computed when you acually need the value from that function since the inputs actually change
2. Whenever you want to make sure the reference of an object or an array is exactly the same as it was the last time you rendered if none of the internal workings changed, you're gonna want to useMemo here to make sure that you only update the reference of that object whenever the actual contents of the object change instead of updating every single time you render
It is exactly same as Pure components in class
@@kirankamath5891 isnt point can be achieved through useEffect() too?
I found 3 cases:
1. Memoizing props to prevent wasted renders
2. Memoizing values to avoid expensive re-calculation on every render
3. Memoizing values that are used in dependency array of another hook
@@ayeshasarwar615 i had the same question but sadly you can't, the variable would be defined INSIDE the useEffect hook and we won't be able to access it outside of it due to scoping
First thing I do to learn a new tech is see if you have a video on it already so I can learn it fast and easily! Thank you very much for helping developers like me out there. Best wishes!! :)
This is the clearest explanation I have seen on this topic! Great work!
To be honest, after looking around youtube for some time, I was quite dissatisfied with the tutorials covering react hooks. I clicked on this video ready for another let down, but your video was great!! You cover topics clearly and concisely with a great balance between verbally explaining and showing your code. (I hope that made sense.) Gonna probably go through your whole hooks playlist now. Thanks a lot for the great video.
Memoization of object is huge learning for me. Thank you Kyel
It's really helpful.. please explain useCallback and other hooks please
Your explanation is so concise and well thought out. Thank you!
In every video, you will be taught new things, unlike other UA-camrs. Thank you so much for providing such amazing concepts for free.
Dziękujemy.
Thank you Kyle! My girlfriend refers to you as the robot guy. You are some kind of Terminator robot sent here from the future to help us with all of our programming needs.
You can notice that he blink at 5:21
my wife agrees :'D
lol
This guy is pure gold when it comes for web development tutorials. Luckily he matches my stack. Can't thank him enough. Keep doing this man :)
Truly commendable. As far as the videos i have seen, none of the youTuber explained this. Thank you so much for explaining meticulously. God bless you.
Being simple is not so simple and Kyle has mastered it.
Thanks for the video! Best useMemo tutorial I've seen. And that second use you explained at the end for useEffect with objects and arrays in the dependencies is awesome. I didn't know how to handle those cases.
Best UseMemo video I've seen so far, good job Kyle !
Ohh, thank so much! I watched you video 3 month ago and didn't understand second case, but now you open my eyes! Thanks a lot!
Sucha an amazin explanation dude !!! Was trying to wrap my head around the memo hook ... your explanation was spot on .
Thank you Kyle! for giving such clarity in explanation
Thanks very much for a great explanation.
Recap: 9:49
Finally, a concise explanation of useMemo
Fantastic tutorial Kyle. Your explanation is precise, on point, and understandable. Your series about React-Hooks is one of the best on UA-cam.
easy explanation thanks bro👍
bro your explanations are insane
You killed it man, that's awesome. You make my concept clear. Thanks buddy.
Just a brilliant explanation, lots of thanks! My mentor told me to learn memoization, and after just 10 minutes of this video, I understood what it's for and how to use it.
The most simplest video but easiest understand about hooks ,Thank you so much for you sir~
Super helpful! One of the best descriptions of useMemo I have seen. Thanks :)
This was the best example to understand useMemo. Thanks a lot!
Dude I stumbled upon your channel again and it is a gold mine. Thank you!
Amazing video, always can count on your videos being succinct and informative. Thanks man.
The sample code explains why and when useMemo is needed very well. Thank you Kyle.
So why dont we use useEffect for the first example?
Finally!, I understand this useMemo function, thanks
By far the best explanation
Best useMemo explanation so far... Was longing for it... Thaks Kyle! :)
Thanks Kyle for explanation.
Separate thanks for your clear english.
It's easy to hear and to understand each word you say.
Amazing man!! loved your explanation!!
Excellent tutorial, as always. Completely unrelated, but that audio artefact around 7:44 almost had me throw my headphones away again.
That exact sound is what my headphones usually make when they break.
Because I got distracted, I decided to rewind a few seconds to hear what you said, and the artefact was there at the exact same spot. That's when I realized it was the video and not my headphones -_-
Yeah, I go through a lot of headphones, about 8-10 pairs per year. Always the left one going first, for some reason...
You are absolutely a legend. Your examples are very concise and clear.
i literally been searching in udemy for a course that explain react hooks like this saw couple of videos but none of theme get to that great content quality feels guilty to get that for free thanks man
Nice to have Kyle in the world of internet, you're my ideal dev!
oooh that was the best explanation i've seen so far
I like your videos very much, because they are short and you manage to explain things in a simple way. Thank you!
Awesome stuff as usual Kyle, I'd love to see an useCallback tut, thanks!
Extremely clear explanation!
that second application example was really mindBlowing. Thanks.
Well explained, Kudos Kyle.
just decided to increment my knowledge of react with this react hooks playlilst during the weekend. Rock on!
Great. Examples are simple and explanation goes straight to the point.
I love you man, this is so easy to understand.
Best Practical cases are covered, awesome.
I just immediately fell in love with useMemo. I mean, wow!
I am in love with this guy! thank you for explanations :)
Clear as crystal. Thank you for the vid!
This was exactly what i was looking for, thanks!
Amazing explanation!! Thank you so much for the channel and the hard work you put into it, I really appreciate it!!!
cant wait to implement this trick on my project! Great tutorial!
Thanks for the great explanation. Now for my the useMemo march clear than before.
Key Differences
- useMemo is used to memoize values.
- useCallback is used to memoize functions.
Usage:
- Use useMemo when you have a computation that you want to avoid recalculating unless necessary.
- Expensive calculations that don’t need to be recalculated every render.
- Derived state that involves costly processing.
- Large lists or data sets that require processing before rendering.
- Passing objects or arrays as props to prevent unnecessary re-renders of child components.
- Complex dependency arrays in hooks.
- Use useCallback when you have a function that you want to avoid recreating unless necessary.
Return Value:
- useMemo returns the result of the computation.
- useCallback returns the memoized function.
Well explained, Kyle!
This was an excellent explanation! Thank you!
5:49 In fact, useMemo is not called on every single render of the component. It only gets called when number changes.
I think useMemo get’s called every single time, but useMemo detects if the input has changed and decides if the callback function needs to be executed
Great Tutorial Kyle
Thanks a lot for this simple explanation with an example, helped me understand some use cases a lot more.
Simple and clear explanation! Thank you
you explained with so much ease best video
Thank you for your clean explanation and it helps me a lot!
Sir Kyle, Friends, useMemo(()=>()=>()=>()=>someresult) works!
If i am not wrong , useMemo executes not only the function passed to it ,but continues and executes
the nested in function, nested in function, nested in function...function.
Thank you Kyle ! 10 minutes which makes me understand :)
Amazing explanation! Great video!
you are a legend Sir! going through a Meta certified frontend course and they did a pretty bad job at explaining memo, I already knew where I have to come to understand it better and I was correct.
Great video kyle!
keep in mind that my entire career depends on your videos 😂😂😂😂 so keep up the great work 💙💙
Man, you deserve more subs! big thumbs up
Amazing explanation🙌, have never seen like this before. thank you
you are a skillful and smart ,patient youngster
Very good explanation! great video man, keep it up! 🦾
Bravo! Great explanation!
This content is awesome. Need more such performance improving ideas
The object-example was a good one!
bro you are a god, you just save me thank you so much
Your videos are spot on thanks dude
Todo:
2:50 why does react seem to detect change in double number variable even though it’s not state? It doesn’t, but when the state changes the react component is re-rendered which means all the code inside our functional component runs again, so slow function is executed
Amazing explanation, thanks
Thank you . This video help me understandings about useMemo
Simple and Clean Background..
Nice ))
Thanks for simplifying the web man!.
wow man you explain very well
my mother tongue is not english but even thuogh i understand it perfectly
you are amazing Thank You
very easy to understand, thank you very much
Very clear, very helpful. Thanks a lot :).
big fan of your teaching sir :D
Thanks Kyle... You're awesome!
Always the best explanations videos. Keep doing this awesome work! Thank you!
Thanks for the great explanation. Really helpful ❤️
Very nicely explained 🙏
God level explanation, I am glad I clicked this video!!
Amazing explanation !!! Well done, thank you very much
This was very helpful, thank you man :)