Get 1 on 1 mentorship with me! ▶▶▶calendly.com/c... 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 :)
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
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.
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.
@@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).
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
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!
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.
Good video, very concise. QQ for the useCallback, is the changeChildNumber function still needed? Can't the setChildNumber go straight into the useCallback?
Memo() is a HOC that monitors useCallBack creates a "singleton pattern" of the enclosed function useMemo creates a smarter Singleton Pattern that looks at the args as well
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
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)
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 :(
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
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.
So what is the difference between useMemo and useCallback. Switching useMemo with useCallback in your example will make no difference in the behaviour. Right ?
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
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?
Great video but a bit too overly contrived and obvious simplifications render the example broken. Like why create a function with signature A that calls a function with signature A? Just call the original function. The same can be said for the 1st parameter to useContext.. just pass the original function. When both simplifications / optimizations are done, the idea / example breaks.
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
