React 16.6: React.memo() for Functional Components Rendering Control


  • React.memo()



What is React.memo()?


Components will only rerender if its props have changed!
Normally all of our React components in our tree will go through a render when changes are made. With PureComponent and React.memo(), we can have only some components render.

const ToTheMoonComponent = React.memo(function MyComponent(props) {
    // only renders if props have changed

This is a performance boost since only the things that need to be rendered are rendered.

PureComponent works with classes. React.memo() works with functional components.

import React from 'react';

const MyScotchyComponent = React.memo(function MyComponent(props) {
  // only renders if props have changed!

// can also be an es6 arrow function
const OtherScotchy = React.memo(props => {
  return <div>my memoized component</div>;

// and even shorter with implicit return
const ImplicitScotchy = React.memo(props => (
  <div>implicit memoized component</div>

Wrapping an Existing Component

Since React.memo() is a higher order component, you can use it to wrap a functional component you already have.

const RocketComponent = props => <div>my rocket component. {props.fuel}!</div>;

// create a version that only renders on prop changes
const MemoizedRocketComponent = React.memo(RocketComponent);

A Quick Demo

I tried creating a quick demo to show the render happen and also not happen if a component hasn’t changed. Unfortunately, the React Developer Tools hasn’t fully implemented the React.memo() stuff yet.

If you look at components, it shows TODO_NOT_IMPLEMENTED_YET:

Once DevTools is updated, we’ll be able to see which components are being rendered. The memoized component should not trigger a render if it’s props haven’t changed!

And here’s the demo app:

  • has a counter just to trigger app renders
  • has an input for showing messages
  • has a normal version and memoized version of component to show messages

Why is it called memo?

Per Wikipedia:


This makes sense since that’s exactly what React.memo() does! Check to see if an upcoming render will be different than the previous render. If they are the same, keep the previous one.

This question was asked on Twitter also and Dan explained why it was called memo and not pure like PureComponent:


This is a great addition to React as I’ve always written things in the class form just to take advantage of PureComponent. Now we can have our cake (functional components) and eat it too (render only on changes) with React.memo()!




Notify of