useMemo vs useCallback hook in react JS

hello everyone this video is about use memo versus use called back hook what is the difference between them and we will just explain it and you will get a clear concept of this what is the difference so let's I will just show you an example for both of them in you will understand very well through example first of all the use memo Hook is used to memorize video but they use callback Hook is used a memoise function so now let's explain it with an example this is example for use memo hook okay which returns just memorize value okay I have these two two State variable one number or for Dark theme and this is the style CC style which I have applied and this tube and this is a function which I have called and it return a number this is the function which I have created okay and I pass the number here and then I just go through I return that number back okay and I use this Loop just for the purpose to show you instead of this Loop in real application you may be a perform some operation on this num number okay but I have just used this Loop to show you the example the difference so now let's check this example okay the app is running let's see it and let's move to the Chrome browser this is the app which is running okay let's move to the console also so now for example okay let's once I will depreciate yeah after replacing this so let's first of all press this button okay I would like to change the number see it will take some time see it is taking some time because again let's press it again it takes some time press it again it takes some time when I press this toggle button see it takes a time when it toggled but instead of this universe I press the toggle button I don't need to wait because I just deal here with number I don't need to wait whenever I press the toggle button again it takes some time press again it takes some time but this is the problem it will just affect the performance of our code so for this purpose we want to call this um function here I showed you whenever we press this toggle button again it call this function okay this function if we change the number again that calls the function so we don't need to call that function whenever uh we do need to call that function whenever we need we never will press the toggle button we need to call this function we never G we just change this number so for that purpose we use use memo hook so let's use the use memo hook so let's import it yeah that has imported using Mohawk has the same syntax as use effect H has two arguments the first one is the use callback function and the second one is the array dependency in the array dependency I will just pass number it will re-render this USB hook whenever we change this number okay this number so here I will just return I will call a calculation function now and I will pass number to that and let's store that number inside const c number is equal to this name is Cinema let's remove now this save it so now let's check it again so now whenever I press the toggle button it will not call that function it didn't call and didn't print directly automatically that toggle see but when I change this number see that called The Loop was printed and it has changed after 2-3 seconds again after two three second and it is calling that function so it was the difference it is returning use memo video memoize video okay just I will leave whenever we need a video to return We perform some operation that and we want to return on that so for that purpose we are using use memo but the use callback function is used to return memoiz function so for that let's create another example so this is the example part use called back hook so this is again to State variable style and this is the method okay which return a table for example whenever we pass a number to this function this number okay so it will return at a number multiplied by one by two n by 3. and this is the code input build and this is button for toggle and this is the print table another component which I have passed this function to this print table component so let's check this print table company we get got this calculate function then we have a state variable where we store this array okay when we return this array we will store that inside this Row in use effect hooker we just console this statement and we set the that array inside this this means that it will be updated whenever we call update this function anywhere we call this function and we printed that Row the values of that row so now let's check the result okay what is the result of this so this is the result we printed those three variables those three table okay and this is the toggle button so now whenever we change uh this let's press change the number see the table print it means that print table component has called okay let's check that this component has called the Sprint table again let's press toggle button what happened again that has called but instead of that we don't need whenever we press the toggle button again that company in this print table component has called so this is the problem okay if we change the number that's called if we press the toggle button again that is called so whenever we change number okay we will call that component because we need to perform some operation and that numbers we want to call that component but when we press the toggle button we don't need to call that component so for this we use callback uh hook okay a function so now let's come here first of all let's import that so let's use use callback hook use callback so that has imported automatically the syntax is the same as the usema okay the same syntax it has the first argument is the use the Callback function the second one is the array dependency the array dependency we will just pass number okay whenever we change this number so we will call this function so now let's copy this cut it okay and paste it here and also use const here we will assign this name of this function this function okay so so now let's check it okay what happened now let's refresh the code so let's now first of all change the number see the table as printed that has changed okay let when we press the toggle button see that has not friend in it means the component has not called so it was all about the use callback function that we'll learn so now the difference of these two hooks was that use Hook was just minimizing a video but this memoized a function for us okay this is the main difference between these two hooks they use memo cues is used to minimize a really just one video but the user callback Hook is used to memorize a function for us so it was all about this I hope this video was helpful for you if you like this video don't forget to subscribe and like this video comment down thanks for watching

Channel: Code With Yousaf

Views: 7,209

Keywords: react hooks, react, react usememo, react hooks tutorial, react usecallback hook, usememo react hooks, usecallback hook, react usecallback, usecallback, usecallback react hooks, usecallback vs usememo, usememo, usecallback hook in react, learn react hooks, usememo hook, usememo vs usecallback, react usecallback vs usememo, react usememo hook, usecallback react hooks in hindi, react hooks project, usecallback react hook, reactjs, react hooks usecallback, react memo

Id: CSFMLmON5hM

Length: 7min 39sec (459 seconds)

Published: Tue Jun 27 2023