Header

What does React.memo do?

Frontend and Tutorials

Post Image

TL;DR: React.memo is a higher order component that you can use to ensure functional components only re-render when the props change (much like PureComponent for class components). It’s a tool you can use for improving performance in your React applications.

Let’s say we’ve created a simple component that displays information about a user.

// User.jsx

import React from "react";

const User = ({ avatar, name }) => {
  return (
    <div>
      <img src={avatar} />
      <p>
        Logged in as <strong>{name}</strong>
      </p>
    </div>
  );
};

export default User;

Our application displays both the users information and the current time (which is updated every second).

// App.jsx

import React, { Component } from "react";
import User from "./User";

class App extends Component {
  state = {
    date: new Date(),
    user: {
      avatar: "/avatars/rob.jpg",
      name: "Rob"
    }
  };

  componentDidMount() {
    setInterval(() => {
      this.setState({
        date: new Date()
      });
    }, 1000);
  }

  render() {
    const { date, user } = this.state;

    return (
      <div>
        <p>
          The time is <strong>{date.toLocaleTimeString()}</strong>
        </p>
        <User {...user} />
      </div>
    );
  }
}

Using console.log we can easily check to see whenever the <User /> component renders.

// User.jsx

const User = ({ avatar, name }) => {
  console.log("Rendering <User />");

  return (
    <div>
      <img src={avatar} />
      <p>
        Logged in as <strong>{name}</strong>
      </p>
    </div>
  );
};

If you check the development console in your browser, you’ll see that the <User /> component is rendered every second when the the time is updated.

11:47:00 Rendering <User />
11:47:01 Rendering <User />
11:47:02 Rendering <User />
11:47:03 Rendering <User />
11:47:04 Rendering <User />

In an application this small the performance hit is going to be negligible. However, once your project reaches a certain size, you’ll want to make sure that you avoid and unnecessary re-renders for the sake of speed.

Previously, you could only avoid this situation by converting your functional component to a class component which extends React.PureComponent. React.memo provides a higher order component which prevents re-rendering from happening unless the props change.

To use it, simply wrap the component using React.memo before you use it.

import React from "react";

const User = ({ avatar, name }) => {
  console.log("Rendering <User />");

  return (
    <div>
      <img src={avatar} />
      <p>
        Logged in as <strong>{name}</strong>
      </p>
    </div>
  );
};

export default React.memo(User);

You should now see that Rendering <User /> is only displayed once for the initial render.

A little bit about the author

Rob is the Product Development Manager at aTech Media. He is absurdly tall with a passion for CSS, JavaScript, burgers, and rugby.

Tree

Proudly powered by Katapult. Running on 100% renewable energy.