Get 1 on 1 mentorship with me! ▶▶▶calendly.com/codingwithchaim/...
usecallback vs usememo vs memo was the question I was asking myself when I first saw them. In this video I aim to clarify what each one does and how they differ from one another.
Get 1 on 1 mentorship with me! ▶▶▶calendly.com/codingwithchaim/...
usecallback vs usememo vs memo was the question I was asking myself when I first saw them. In this video I aim to clarify what each one does and how they differ from one another.
I would like to do a Q & A video in the near future. If you’d like me to answer your question, reply to this comment with your question, and it might just get featured!
It might be a dumb question but should I at ALL times look to useCallbacks, Refs and Memo/useMemo to avoid all kind of unnecesary renders? Are those principles for delivering a solid React application? Like sometimes I will noticed these unnecesary renders in parent components on child events, this is the way to avoid that infortunate an annoying behavior? Like a few weeks ago I did notice that passing props through onChange event was messing with a login form as It was re rendering the parent (I had a setState there being called through useEffect on change of my input) and it was losing focus on EACH type event I was making, my solution was to memoized the value, set the onChange local on that input and send the value through an useCallback and have an useRef to store the value instead of a setState, and that way I made it. Typing on any input of that form wasn't causing re renders on the parent therefore I wasn't losing the focus on each key press.Sometimes I will notice that kind of silly behavior without messing with my program but I wonder if the re render as my program scales would become annoying or is affecting performance even at that low scale. prnt.sc/zx7t6b prnt.sc/zx7z1v Those are snippets of my code. Parent and Child.
Usually the computations are on object arrays as big as 100-500 items which are retrieved via an api call (in rare events where such computations are not handled on server side). Will useMemo work on such arrays, where same set of object array is retrieved repeatedly from an api call? 1. Will it be treated as a changed array? 2. Is it a shallow comparison? 3. What will be the workaround in such a case?
a summary I have made for this great (!!!) video: - When parent is being changed - it is rendering itself and his children. If we don’t want to render the child if none of its props is changing, then we use: “import {memo} from “react” export default memo()” - Passing a function (declared and implemented in the parent) to the child as a prop so that the child is executing it inside. In that case the reference to that function is being changed in every parent rendering. So the “memo” is not working. we’ll wrap the function in useCallback and will not pass any dependencies because we don’t want it to ever change. - Use useMemo when you want to memoized (store in cache) the value after complex or long computation and whenever some of the dependencies, passed in that hook, is changed then it will recompute that again. Thanks Chaim from Israel :)
And thank you for this concise and great summary!
Thanks :)
This is by far the MOST DETAILED and succint and SIMPLE explanation for these React hooks! Respect man! Subbed!
Here here
Explaning referential equality blown my mind, now I'm understanding it! Got yourself a new subscriber!
Thank you! I’m so glad you find it helpful!
F**k, this is the most straight forward, easy to understand, and most concise explanation for all of these things.
I was literally dying to understand these hooks so I looked at different tutorials and still didn't get it but now your simple way of explanation helped me to understand them fully so thank you, man, wish you the best. You just gained a new subscriber.
I googled, searching for the differences between those three functions and I couldn't understand anything at all. I watched your video and now I can see the difference clearly, thank you so much for your time recording this video. Subscribed
6:10 useCallback explanation 9:12 useMemo explanation Very helpful video! Thanks!
Finally my dought related to specially usecallback is now clearled .A big thank u sir .
Most underrated channel. You deserve more subscribers...
This channel is a literal GEM. Love your explanation!
Wow, thanks!
DUDE! Had I discovered this video about 2 years ago! thank you so much !
been stuck on these for months. you are an excellent tutor.
This is pure Gold approach to make us understand complicated topics. I am subscribing you right away man. Great work .
This is very useful. Short and concise, straight to the point with working examples. Finally understood the use of useCallback after so long! Thanks. Subscribed!
Thank you! Glad you found it useful
Wouldn't using useCallback instead of useMemo also work in the last example?
what great video man, I feel relieved by the amazing content here
Superb explanation, made the concepts crystal clear in such a short video! Thanks a ton!
I've had to seen many videos, under a large span of time, to actually get these three concepts as of now. Thank you!
wow ive been stuck on this for days and it finally just clicked thanks man subscribed
This was a fantastic video describing these 3 in perfect detail. Thank you
You told everything very clearly. It helps. Thanks
impressive video. it gives me a perfect vision of React memo Thanks. Chaim
This is pure GOLD !!! Awesome content
great explanation sir, I went through several article but never understood properly after watching this, concept got clear. Thanks
Got all my doubts cleared! Thanks a lot.
Hi Chaim, I really like your videos! It helps me a lot with advanced topics! THANK YOU MAN!
THis was really a precise to the point video, now I can go ahead and optimize my code. thanks a lot Chaim 🎉🎉🎉🎉🎉
Man believe me working in react for one year and asked so many devs, watched so many videos and read so many Blogs about these hooks, no one really able to clear my doubt until I watched your video. Thanks man thank you so much.
what if we use array inside usecallback does not it work same as usememo
That was a really helpful video. Thanks Chaim.
Awesome explanation, simple and straight to the point.
this is the only video that made me understand memo usecallback and use memo thank you good sir
Finally I understand the difference!!! Thank you!!!
Such a simple explanation. Glad I landed here.
Best explaination for all the three things. It makes whole concept easy for me, easy to use now. 🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰
Picked up perfect examples. Now I feel difference between useCallback, useMemo and memo. Thanks))
Thank you! This was really helpful and well explained with a simple demonstration.
Fantastic, easy to follow example! Thanks!
That was lot of react in just 13 mins, THANKS A LOT
Thank you so much for detailed information!
Your explanation and examples in my experience is on another level always feel skeptical until I watch yours😂.
Ive watched a lot of coding channel over the years. This channel will blow up for sure nail everything A++ content, quality everything. If you read my comments im usually a troll so if you can get +1 from me you own the internet.
Thanks!
Good video, very concise. QQ for the useCallback, is the changeChildNumber function still needed? Can't the setChildNumber go straight into the useCallback?
I understand it, Thank you very much! Greetings from Peru.
Crystal clear explanation ❤ Subbed
Your explanation and use cases were to the point
awesome material,, keep the good job on
Awesome explanation. Thank you very much. More subscribers!
Its funny I always complain about music in coding tutorials but you seemed to have done it properly =/ you got skills. hit bell button because of it ( : and good content obv
Perfectly done. Thanks😇
Thank you. Very helpful. Subscribed!!
Best explanation ever :) thank you.
You, Sir, are a wonderful man!!
Thank you that’s very kind
Woow.. Thank you.. Understood it well.
Excellent explanation 🚀
Simply amazing, thanks a lot!
Glad you liked it!
the greates explanation ever!
super helpful video, very well explained, thanks!
Thanks! Very glad you found it helpful
Subscribed, really good teacher!
Thank you! Welcome to the channel
Thanks man. it really helped. Subscribing !!
thank you sir you have cleared all my doubts
Great video, I am your new subscriber!
Nice explanation 👍🏾
you are goldmine of knowldage!
thank you!
BEST , thank you so much
excellent explaination sir keep uploading new videos its help us
7:19 are incrementLocal and changeChildNumber gets re created every single time when App component is rendered?
yep thats exactly it
Excellent explanation thank you.
You’re most welcome
You sir earned a sub
Thanks so much, you saved me from an angry PM ❤️
My pleasure!
you are the best sir
Still the best video in this topic by far
i always re watch this video before my interview also suggest my friends about this video
The music in the background really disturbs our concentration. I hope you do something about it
It sounds like he's rapping.
@@Joshuaomorales he is rapping
dude chaim has fucking bars. so chill let him spit over the beat about his react knowledge. TURN THAT SHIT UP CHAIM
@@BobbyBundlez Yeah, yeah Ayo, Hooks, it's time. It's time, Hooks (aight, Hooks, begin). Straight out the fast dungeons of rap. The prop drops deep as does my state. I never render, 'cause to render is the father of great. Beyond the walls of elements, life is defined. I think of useCallback when I'm in a React City state of mind. Hope the plate got some rate. My date don't like no dirty great. Run up to the mandate and get the advocate. In a React City state of mind. What more could you ask for? The optimized prop? You complain about useMemo. I gotta love it though - somebody still speaks for the top. I'm rappin' to the package, And I'm gonna move your trackage. Lightweight, modern, compatible, like a file Boy, I tell you, I thought you were a hostile. I can't take the useMemo, can't take the component. I woulda tried to compose I guess I got no proponent. I'm rappin' to the trackage, And I'm gonna move your package. Yea, yaz, in a React City state of mind. When I was young my father had a pop. I waz kicked out without no crop. I never thought I'd see that top. Ain't a soul alive that could take my father's shop. A sexy node is quite the goad. Thinking of useCallback. Yaz, thinking of useCallback (useCallback).
@@neoesm omg well that just made my morning
awesome!
Thank you!!
You're welcome!
Wouldn't using useCallback instead of useMemo also work in the last example?
This is gold
So what is the difference between useMemo and useCallback. Switching useMemo with useCallback in your example will make no difference in the behaviour. Right ?
memo is a higher-order component to memoize an entire functional component. useMemo is a react hook to memoize a function within a functional component
would sending setChildNumber to child break Memo same as sending changeChildNumber function?
Yes it would
the best explanation here in youtube
Thank you! I’m glad you found this helpful
Shouldn't all components render with memo by default in the next React version ?
Really nice job! I would like to use same example but translate it for hispanic ppl into my channel. If you dont mind .And of course giving you the credit
Thank you! Yes for sure, go for it!
thank you
So how are useMemo and useCallback different? They both wrap functions that get recalled from the same memory if the args haven't changed. Is it that useMemo caches the return value but useCallback does not?
Exactly. UseMemo caches the value returned by the function where as useCallback caches the function itself
very detailed explanation love your videos on react. but can you slow down a little bit.
hello! Your content is awesome! could you explain useRef? An it would be cool to record a tutorial, how to implement advanced filtering for e-commerce web app with react/redux/redux actions. I guess, it will be interesting for your subscribers, because there are a lot of video tutorials about e-commerce apps, but they are not implemented in professional way. Thnks
UseRef is on the list as well! Please keep your suggestions coming I really appreciate them
Thanks!
You’re welcome!
vey nice explanation new subscriber here
Thanks! And welcome!
hi, isnt it always better to usecallback while passing functions then ?
If you’re not using memo on the component that the function is being passed to it won’t make any difference to use useCallback. Also it’s important to remember not to optimize pre maturely. First encounter the bottle neck and then solve it
But isn't it okay for the child component to rerender? As long as you don't have long calculations happening in the child component and the child node didn't change, actual changes in DOM shouldn't happen right?
So a couple points here. First, you are correct that it's ok for a child component to re-render, memo is just there for you when you run into a performance issue due to excessive re-renders, but typically this wont be an issue. As for your second point, it's important to understand that once a component renders, the browser will paint. The only thing as react devs that we can control are renders, but after a render happens, the browser will paint to screen.
nice
be cool to share source code so we can play with it. Also if-you say source code in below thing we see your adds so you get more people seeing them (: win win
Nice
Thanks!
Can you please start to make real-life projects in react js and node js. (MERN) stack development I have seen people on youtube they doing just simple things but I want you to do something different which help us beginners to go to the next level. Thank you
Yes absolutely! I think thats a great idea to add to the list.
@@CodingWithChaimYeah, Thanks for hearing me.
I've been asking @Coding With Chaim for several months already, to create such content. Tutorials are for beginners, not for senior programmers and we want to see, how projects implemented in professional way)
Yea this is on the list! I have so much to get to thanks to all the great suggestions
Great example! I actually understood the concept with this video. But, why do you have music in the background when you are talking? It is distracting :(
👏👏👏👏👏
Explanations are superb! But, I would recommend removing background music when speaking
Only added more questions than before lol
BEST BEST BEST