Every state change in React can cause re-rendering which can affect badly on application.
Mostly when the component size gets increased.
useMemo hooks are used for improvising the performance of React application.
Does useCallback and useMemo do the same thing?
Though both are used for performance optimization, it might be confusing for developers regarding their use-case. So let’s understand them thoroughly.
Before diving deeply into their difference, let’s understand why they are used.
- As mentioned above, both hooks are used for performance optimization.
- If our application is doing frequent re-rendering then based on the use-case we can use one of them.
Let’s see how syntactically different they are:-
As we can see, there is no such difference in their syntax except in their naming. Both hooks accept a function and a dependency array.
How is useMemo different from useCallback?
The main difference between useMemo
and useCallback hook is,
useMemo returns memoized value and
useCallback returns memoised function.
Still confused? No problem. We will understand the difference by considering one example.
Let’s say we have one parent component,
and a child component
We can observe that the console statement -
child component rendered is getting printed every time we click on the
Though the state change is accuring in parent component only, the child component is re-rendering unnecessarily.
Let’s have a look on how we can avoid that.
In this situation
useMemo can give us memoized result.
Just call the child component by wrapping in
So, the parent component will look like:
We can observe here that,
the console statement is not getting printed as we click on
useMemo helped us in increasing performance in this situation.
Now, let’s see how
Just create a function in the parent component and pass it to the child component. So that the parent component will look like,
Now, if we try to click on the
we can see
child component rendered on a console.
useMemo won’t help out in this situation.
Because every time the parent component gets re-rendered,
handleUpdateNum function got re-created.
useCallback comes into the picture which returns us memoized function.
Let’s wrap the handleUpdateNum function by
useCallback hook and see the result.
So the code in parent component will look like this,
Now we can see, even after the change in the parent component’s state, the child component is not re-rendering.
Though we have explored
we can make use of these hooks as per our requirement.
Just consider these hooks as fine-tuning in React.
It can’t fix badly written code but if everything is up to the mark,
these hooks will provide their extra benefits.
For reference, please use