What is React.memo and How Does It Work?

Add more performance boosts to your React applications

React.memo is a React higher-order component used to skip re-renders.

The “memo” in React.memo is referring to the computing term memoization

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

When you wrap a component with React.memo, React will use the last rendered version of that component.

I used memoization all the time in my React applications to improve performance.

I’ll be going over some simplified examples of how React.memo works and where I have found it to be useful in my own projects.

Getting Started

In the example above there are two components that will write to the console when they render and rerender. The MemoExample component holds Component1, Component2 and has a counter state variable that will trigger both components to re-render when it changes.

After updating the counter to 3, we have 4 logs for each component. One for the initial render, and 3 more for each time the counter variable changed.

If I did not want Component1 to rerender when the counter variable changes, I can use React.memo to skip it.

Now that Component1 is wrapped by React.memo, let's see how it goes.