UseMemo:
UseMemo is one of the React Hooks , that is basically used for memoization of some expensive calculations. It is being used for performance optimization.Here is an basic example of the hook:
There are 2 input fields in which one is attached with the name variable and other one is related to the length variable. When we change any of the variable in above fields it will print the desired name and sum of numbers length accordingly :
But why we use useMemo here, we can also use a normal callback function and calculate our result via doSomething , Any guess ? Alright I tell u , we use useMemo Hook here for memoization purpose, beacause we don’t want doSomething callback to execute every time our component re-renders, even when our name field changes .
const doSomething = useMemo(()=>{ …. }
return sum;
},[length])
The array that contains the length variable length is known as the dependency array, you can pass the list of dependencies here , the callback doSomething will be execute only during the mounting phase or if there is a change in the value of dependencies list variables.
What happen , If you pass the list of dependency array as empty ?
const doSomething = useMemo(()=>{ …. }
return sum;
},[])
then it will only execute during the mounting phase, what happens when we don’t pass the dependency list array ?? like this….
const doSomething = useMemo(()=>{ …. }
return sum;
})
In this case , your callback will be executed every time when your component re-renders . We can also take advantages of UseMemo Hook for various other use-cases. Here is one of them:
got the trick ? .. If No don’t worry , as I told you that useMemo callback will only be executed, when it’s one of the dependency value changes but the val variable is not the part of dependency list that’s why our result remains same, it will be only executed when the length changes and it will also pick the latest value of val to calculate the results.
UseCallback:
useCallback is also used for the memoization purpose but it will return the memoized function callback instead of some expensive calculation result. The syntax is somewhat similar to useMemo but instead of some calculations you have to pass a callback function like this:
const memoCallBack = useCallback(()=>
doSomething(length,val)
,[updatedNo])
Here is an example of that:
This time I put doSomething in useCallback . The result will be :
Have you noticed something !… our result is same even after I change the length value why ? Any idea ! because this time the dependency list consist of an another variable updatedNo which will only get update after I click on the button Change Result . No matter if our val or length update the callback will return same result because in callback the values can be updated only when one of the dependency list variable will change.
Yeah ! this time our result is update as you can see the No of times Result Changed 1,
It will get updated only after the Change Result Button is clicked ,but mainly useCallback is used for those cases in which we are sending some callback function from parent component to child component so that the callback would not get update on each and every re-render.
So what we conclude.. ? useMemo and useCallBack , both are used for the memoization purpose i.e…. for performance optimization in react. useMemo for some expensive calculation and use Callback for expensive callbacks, so do not overuse these hooks.
