Background

Memoization is an optimization technique used to speed up the computer programs by storing the output of expensive calls and returning the same cached output when the same inputs occur again.

So it tells us that it is a technique that basically executes a Pure function and saves the result in memory. Next time when we try to execute the same function with the same arguments as before, we return the previously stored output. So no need to execute that function again.

Do we need memoization in React?

In React, whenever the Props or State of the component change, the entire component re-renders by default. Note: It re-render every child components that have not had their props changed.

Consider a component that renders multiple child components in it and each time the props/state of the parent component changes, the entire component tree will re-renders when they don't need to. This doesn’t really make sense. Why would we want to re-render all the components when the props stay the same? (and thus renders the same output)

That's why we need to use the memoization technique to re-render components when they need to.

When to use memoization?

• Where storing the results of heavy/time-consuming computing can save processing time in your application

• Where a function consistently invokes with the same arguments, which waste time and computing power by recomputing every time it invokes.

Memoization in React

To gain performance and improve the user interface experience, it becomes necessary to use React.memo and useMemo().

React.memo

Initially React renders the component into the DOM. Now to update DOM, React first render the component again and compares the result with the previous render results. If the render results are different, React updates the DOM. This previous vs current comparison is fast but we can speed up this process.

React.memo is a higher-order component (HOC), which is basically a component that takes another component as a prop and renders it, and memoizes the results. Before the next render, if the new props are the same, It returns the memoized results and skips the next render.

Custom check

By default, React.memo does a shallow comparison of props. We can also customize this by providing the custom equality check function in the second argument.

React.memo(Component, compareFn);

'compareFn' will compare both previous Props and next Props and returns true if both are equal.

function compareFn(prevProps: any, nextProps: any){
      return prevProps.id === nextProps.id; //custom logic
}

Avoid unnecessary custom props comparison - Cases where component usually re-renders with different props, it is not a wise choice to use memoization. It unnecessarily performs the comparison and will provide no benefit.

useMemo

useMemo() is a React hook that returns memoized values. It will only recompute the memoized values when one of the dependencies has changed.

const memoizedValue = useMemo(fnDelegate, [dependencyArray] );

Conclusion

React.memo() and useMemo both can help to optimize performance through memoization technique if applied correctly.

We should understand the requirement before using them, if the component is not heavy and usually re-renders with different props, we should avoid using them.

End

Thanks for reading this article. I hope it was helpful.

If you have any suggestions or any other interesting topic in mind, please write to me in the comment section below!