useCallback and useMemo
Whenever we set state in react application our component re-renders. This might cause performance issues especially in large application and in large component where we’ll have have a good number of state and we’ll be updating that. So, on every state update our component will re-render. To solve this issue react introduced 2 hooks. Which is useMemo and use Callback. Both are used for performance enhancement and avoid re-rendering of our component in case of state update.
Since both hooks are used for performance optimisation, understanding the use case of both the hooks might be confusing for developers. Here we’ll solve that problem in in this blog that which hooks should be used in which condition. Firstly lets check their syntax.
usecallback :-
useMemo :-
oh f#$%!! syntax is also same. Both are used for performance optimisation. Syntax for both are same. Damn!!
Let’s skip to the good part to understand the difference between them. Basic difference between them is useCallback lets us cache a function definition between re-render while useMemo lets us cache the result of function between re-render. In other words, useCallback returns a memoized function and useMemo returns a memoized value.
Let’s dig deep in this difference.
In below example, we are calling our child component and updating the state of component itself. So whenever we’ll update the state our component will re-render and since child is there in parent component. <Child> will also keep on getting re-rendered on every state update even though <Child> component doesn’t have any direct dependency on that state.
To overcome this problem, react introduced useMemo hook. Now we’ll wrap our child component in useMemo while using that in parent and use that returned value inside parent component.
As we can see, now when we are updating state of parent it’s not re-rendering the child component.
But what if we’ll pass a function/variable of parent component to child component as prop? In that case, when we’ll update state of parent that function/variable will get re-rendered and as we are passing that to child component our child component also will be re-rendered every-time on parent state update.
As we can see here even if the child component is wrapped in useMemo hook but as we are passing checkCounter() function to child component which gets updated on every state update. So on every state update our child component is getting re-rendered just because of that prop change.
To avoid this problem we have another magical hook. useCallback!!
We’ll wrap checkCounter in useCallback function. So by this way we’ll cache our checkCounter function and pass that to child component. Now the checkCounter function is cached. It’ll not re-render on every state update and as we’ll not update this function on every state update our child component will also not get re-rendered on every state update because of the prop.
So the main use case of
useMemo are:-
- skipping expensive calculation
- skipping re-rendering of component
useCallback are :-
- skipping re-rendering
- preventing an effect from firing too often
- updating state from customised callback
Now, when the usage are clear of useMemo and useCallback we can use these hooks in our code. It’ll not our code clean in direct way but if used effectively it’ll increase performance of our react application for sure.
For more deeper insighte, please check :-
