React.memo, useMemo, and useCallback Optimizations
Vložit
- čas přidán 26. 07. 2024
- Learn how to optimize React Components using React.memo, useMemo, and useCallback hooks.
Key Takeaways!
4:40 - When a Parent Component re-renders, all Child components will re-render as well.
5:30 - React.memo is a higher order component, used with functional components. React.memo will compare the previous props to the next props, and if different, will re-render the component.
6:52 - JavaScript Primitives (string, number, boolean) being passed as a prop will work fine with React.memo.
7:30 - Arrays, Objects, Functions being passed as a prop will not work with React.memo alone. You'll need to use hooks like useMemo around the Array or Object.
8:17 - In a functional component, every re-render will cause everything in the function body to be "re-created". So Arrays, Objects, and Functions will be new and different on every re-render. When these are passes to the Child Component, it will cause the Child to re-render.
8:55 - Wrapping Arrays and Objects with the useMemo hook will solve this problem. Better yet, if the dependency array is empty, you should just hoist it out of the function body.
14:24 - When passing Functions down as props, and when Functions are used in a dependency array, wrap them in the useCallback hook to avoid re-renders and prevent useEffects from firing on each re-render.
20:30 - Don't just memoize all the things. Here is the blog post by Kent about when you should use these memoization techniques: kentcdodds.com/blog/usememo-a...
Finished Code: github.com/codebushi/react-memo
Follow me on
Twitter: / huntarosan
Dev.to: dev.to/changoman
Simple an to the point , cleared every doubt
After exploring 100 of videos
Bang, this one is the explanation
Best explanation on these topics so far
Thank you so much.
I've searched far and wide for a simple explanation of these hooks. Thank you very much for posting this.
Thanks for watching!
Sorry to be so offtopic but does anybody know a tool to log back into an instagram account?
I somehow forgot the account password. I appreciate any tricks you can offer me.
excellent demonstration of hooks, better then rest
Best explanation of this topic.
I have never seen such a simple explanation of memo and useMemo. It's great :):):)
You gotta hit that clicky clicky clicky
Great video and explanation! I'm baffled why there's such a shortage of direct and easy to understand tutorials.
I've been reading some tutorials about these topics but i still was confused. Watching this vid eliminated all my confusion. Thanks a lot.
Very very helpful explanations..!! Thank you so much
I didn't expect you to explain so in detail and comprehensible on how to use the callbacks. I definitely learned one or two things and I best start now tinkering on my code. Thanks and keep content like this coming, subbed!
Thank you!
Really great examples. And he is also using fetch to provide extra info about the topic. Congrats. Thanks a lot.
Clear like water. Thanks to explain.
I listened to this without video no less (while riding a bike) and even then it helped me to clear up the confusion, thanks!
One of the great tutorials available on CZcams. Thanks!
Excellent explanation !!!
The best video I have seen so far on these hooks. Thanks !
Hey, thanks for the video, reading the blogpost also helped to understand better the topic (optimizations - pros and cons)
Thank you very much for this video, you explained it very well and it helped me a lot.
Very useful video... thanks a lot, man!
Awesome video man, I really like your key takeaways on the description, u should do more videos like this!
This is the explanations I needed, really good 🙏
Great video. I think one thing you can expand on is the difference between reference and value. React.memo, useCallback, and useMemo compare preference references in memory not values. So the reason why the array prop was causing a rerender on the child is because the arrays reference (memory address) changed everytime the parent rerendered.
Nice point there. Now I'm wondering why, in terms or reference, the child doesn't rerender for the static text. Doesn't it also get stored somewhere in memory? Under the hood.
@@paulopontovaz For primitive types only the values are compared and for the non primitives, the references are checked. This is known as shallow comparison. React uses Object.is() under the hood
Very well explained! Thank you so much!!!! more on react hooks specially API Calls with All kind of request in one custom hook
Amazing explanation!
Thank you. It's one of the most simplified stunning demonstration I have ever seen. Keep going!! :)
this was amazing, thank you !
Glad you enjoyed it!
This is a great video explaining everything. Super clear and super concise.
the best explanation on these topics. great!
Straight to the point, thank you!
Is this a video or a butter so smooth to understand.
Good Luck Bro.
awesome tutorial! explained clearly and straight to the point :)
Great Explanation !
finally i know how all of them works,thankyou so much, you're my hero!
subscribed!
Awesome video, man! Thanks for sharing!
Pretty simple & straightforwards explanation. Now I am working on how to use them along with the Context api. Using that one these days and found it is awesome. However, I also found that I am kind of exploiting it and start making my stuff messy.
Amazing video ! Its awesome how you can simplify things to explain man, keep it up. cogratulations
thanks very clear and easy to understand. keep up the work !!
Great explanation!
Thank you sooo much,for the clear explanation.
Thanks, man for such an informative video.
Thanks for solved my long time problem. 🙏🏽👍🏻🤝👌🏼
You are awesome dude! Thank u so much!
Tq for the explanation, very helpful
Thanks, i follow your explaine vidio, with time tracker ... nice i will subscribe.
Thank you!
Great tutorial, thanks! ⚛️
it is wonderful tutorial, thanks for explaining it very welll
This is what a tutorial should look like , no need to write complicated code to explain an api or hooks in this case .
thanks! now it's clear
"and I'm gonna put this in a paragraph taggggggg" 6:40
You are Awesome THANK YOU
why is that awesome lol.. is that really funny to u ? wow so boring
Great tutorial!
great video, thanks man
Very helpfull! Thank you!
Thank you
freaking awsome
The best!
I've understand all stuff in this video, hovewer I" m not so good in engliish. Thanx a lot! You should made more React videos/ please
Im laughing the way he talks but the thing is he can educate us pretty well
perfect
👌👌
Great
very nice! can you do one with animated transitions between pages? That would be amazing. Thank you!
put the animation on the routs
In your example - what happens if you simply move the function ( fetchData ) outside of the function component App - would that be better / worse than using a useCallback ?
so, the useMemo hook hasn't any profit with the simple types variables as string, number, boolean?
useEffect and its dependencies... 🤔 not too clear, I thought that the array of useEffect had something to do with component update.
it basically starts at around 5:00
LoL, when you prevented RE_RENDER child Component by wrapping export child in useMemo, i lough so loud how simple wast that comparing from other tutorials online... :D Hahahaha
React.memo stops rendering the component repeatedly or unwantedly
Use Memo cached its return values never re-render until and unless there is change in it's dependency value
Use Callback also similar like use Memo but it cached the function itself
I am i correct mates ?
"When I hit the clicky.. clicky clicky..."
8:40 Referential equality
Why didn't you used array within useState
please remove mic from keyboard.......its itterate ....but good explained.
не пей пиво перед записью
Hi
Slowest typo skills I've ever seen but good tutorial though