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

Draft updated on Invalid Date

Chris on Code

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

This tutorial is out of date and no longer maintained.


React 16.6.0 is released! With it comes a host of new features including the two big ones:

  • React.memo()
  • React.lazy(): Code-splitting and lazy-loading with React Suspense

We’ll focus on React.memo() for this article and React.lazy() and Suspense in an upcoming larger article.

What is React.memo()?

React.memo() is similar to PureComponent in that it will help us control when our components rerender.

Components will only rerender if their 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 MyMemoizedComponent = 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 MyMemoizedComponent = React.memo(function MyComponent(props) {
  // only renders if props have changed!

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

// and even shorter with implicit return
const MyImplicitReturnMemoizedComponent = 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 its 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 the component to show messages


Why is it called memo?

Per Wikipedia:

In computing, 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.

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 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()!

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Chris on Code


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel