React — When Should Pure Components Be Used?

React.memo / React.PureComponent usage guide

Vitali Zaidman
Oct 21 · 4 min read

What’s a Pure Component?

(Official docs: React.PureComponent, React.memo)

In the following example, when re-renders,
and are called:

And they always return new React Elements.

Remember that is just syntax sugar for (in React 17 it’s equivalent mostly conceptually) so ‘s code is equivalent to:

Usually, as a result of creating React Elements, they also re-render, so their code will run.

If they are pure, however, they only re-render when any of their props change, otherwise React re-uses the last rendered result.

In our case, a pure would never re-render because it has no props.

A pure will only re-render if changes:

So when doesn’t change, ’s last result is re-used and its code, including doesn’t run.

Sandbox

In the following sandbox, I used an awesome library by a friend of mine, Nir Avraham: use-header-scroll.

The library’s hook returns different header sizes as you scroll resulting in a neat effect where the scroll hides and reveals itself as you scroll.

Try scrolling when is pure and isn’t pure. It can be changed using the checkbox in the middle of the header.

Scroll Performance

In the sandbox above, you probably noticed how scrolling was laggy when was not pure.

Profiler For The Rescue!

When you encounter a React performance issue, try recording the scenario with the React Profiler. In our case:

  1. Make sure is not pure in order to prepare the performance issue scenario
  2. Start recording
  3. Scroll (reproduce the performance issue)
  4. Stop the recording

After that, your profiler should look like this:

React profiler screenshot where Main re-renders often
React profiler screenshot where Main re-renders often

Now we can see that the issue is that is being called on every single scroll.

We can also see a similar issue using Chrome Performance Profiler:

Image for post
Image for post

The performance issue happens because React has to run the relatively huge block of code in on every single scroll event before it could paint the updated results on the screen ( and ).

The time difference between scrolling events and ’s height changes paintings on the screen makes it feel laggy.

Preventing The Heavy Render

When is pure, however, it is rendered only once, and React doesn’t need to run its relatively heavy code on each scroll event.

Then Why Not Make All React Components Pure?

For more details see the following GitHub issue on Facebook’s repo:
Q: When should you NOT use React memo?

In short, it’s because React.memo has a cost in terms of memory and CPU because it has to shallowly compare previous props to the next props.

This sounds like not a big deal, but it is for bigger applications and considered a deal big enough to decide manually what has to be pure and what isn’t.

It seems like, in most cases, making React components pure will be redundant, because they will always re-render anyway.

For example, in the following cases, each of the props: , , , and are generated inline and will be a new prop on each render:

So if Main always re-renders, why would you compare its props on each render?

Optimizations To Help Keeping Components Pure

In all the cases mentioned in the example above, you can memoize props using , , or techniques like extracting prop definitions out of the component, and more.

But these optimizations too, have their own costs in terms of resources and code readability.

For example, this is how from the example above might look like to make sure won’t always re-render (unless one of the props changes):

As you can see the code is more complicated, less readable, more prone to bugs, and costs resources to memoize in of itself (the hooks in lines 14–16 cost resources).

Does it worth it? You tell me. (After using the profiler 😉)

So, When Should Pure Components in React be Used Indeed?

Let’s narrow down the considerations in hand to create a rule of thumb:

Considerations:

  • Making a component pure, forces React to compare props before re-rendering the component. ()
  • A React Component, especially a bigger one, is relatively expensive to render.
  • A component with inline generated props will always re-render (like .
  • Optimizations to inline generated props to make sure a component doesn’t always re-render has its overheads (code readability, resources).

Rule of thumb:

A component should be made pure if its render causes a performance issue and the render can be prevented by making the component pure.

Good candidates for components that cause performance issues which can be solved by making these components pure are usually:

  • Not small. (has considerable calculations or generates many react elements inside)
  • Re-render on user interaction. (click, scroll, hover)

Thanks :)

Welldone Software

The leading full-stack consultancy.

Vitali Zaidman

Written by

https://twitter.com/vzaidman ⎝(•ω•)⎠ https://vzaidman.com

Welldone Software

The leading full-stack consultancy. Creating amazing frontends and rock-solid backends using top notch technologies and practices. Visit us at https://welldone.software.

Vitali Zaidman

Written by

https://twitter.com/vzaidman ⎝(•ω•)⎠ https://vzaidman.com

Welldone Software

The leading full-stack consultancy. Creating amazing frontends and rock-solid backends using top notch technologies and practices. Visit us at https://welldone.software.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store