Optimize your components with React.memo

React.memo (not to be confused with the useMemo hook) is a great tool for eliminating needless renders in your React components. This article will explore the problem it’s designed to solve, and when it makes sense to use it.

Note that render in this context does not necessarily equate the HTML DOM being redrawn, but React executing the rendering logic in your component.

Photo by Clément Hélardot on Unsplash

Consider this trivial example with two Labels and a button. The first label displays a counter, and the button increments the counter. The second label displays a description.

When the button is clicked, how many times will the render logic for Label run? In other words, how many “Render Label” will we see in the console? 0, 1, 2 or 4? And the answer is….

Two! This probably sounds inefficient because the description Label has nothing to do with the counter. Its input isn’t changing on the button click.

But the counter state being updated causes the whole Example component to re-render, and the description Label is part of that function. So what can we do?

React.memo()

React.memo to the rescue! React.memo tells React to remember or memoize a component so that it will only be re-rendered if its input props change. Otherwise it will use the previously rendered result. Obviously this only works for components that always render the same way given the same set of props.

React.memo enables for Function Components something similar to what React.PureComponent or shouldComponentUpdate() did for class-based components.

React.memo is a Higher Order Component (HOC). The complete explanation for that is long, but in the simplest terms an HOC is a function that takes in a component definition and returns a new component definition. Usually, the new one has some new behavior tacked on — in this case, memoization. So to apply this to our trivial example above, we wrap the Label function with React.memo:

Now when the button is clicked, only the first Label will re-render!

When to use React.memo

So why not wrap everything in React.memo? Performance optimizations don’t come free. To pull of memoization, React has to cache stuff and compare props to determine whether to re-render.

When not to memoize:

1. Component is simple. Remember that re-rendering in React does not equate redrawing on screen. React doesn’t do that unless the React runtime decides something actually needs redrawing. React executes that rendering logic really, really fast. For simple components, that rendering logic may be faster than the time it takes to cache and compare props for memoization. But for very complex or deeply nested components, the rendering logic will add up.
2. Props are likely to change with every render. Imagine a component whose props are never repeated. Memoization would be doing extra comparisons for zero gain.

When we may want to memoize is complex components where the props may stay unchanged between renderings.