What is React Pure Component?

Let's learn React pure component and how to implement one

Posted on November 25, 2020


By default, React will always re-render the component each time there is a change in state or props value. A Pure Component is a component that performs a check on the value of React props before deciding whether to re-render the component or not. Let me show you by an example.

Class-based PureComponent

Imagine you have an application that displays a movie title and release status:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "Titanic",
      isReleased: true
    };
  }

  toogleRelease = () => {
    console.log("toogleRelease");
    this.setState((prevState) => ({
      isReleased: !prevState.isReleased
    }));
  };

  render() {
    const { title, isReleased } = this.state;
    return (
      <>
        <MovieTitle title={title} />
        <h1>Movie is released: {isReleased ? "yes" : "no"} </h1>
        <button onClick={this.toogleRelease}>Toogle Release</button>
      </>
    );
  }
}

Next, you have a MovieTitle component with the following content:

class MovieTitle extends React.Component {
  render() {
    console.log("MovieTitle is rendered");
    return <h1>Movie title {this.props.title} </h1>;
  }
}

Here’s a running demo.

When you change the isReleased value by click on the button, you’ll find that MovieTitle gets re-rendered because React will print the log to the console. But actually, MovieTitle component doesn’t need to re-render because even if the value of isReleased is changed, its output remains the same.

To prevent the re-rendering and optimize your React app performance, you can extends the PureComponent class instead of Component:

class MovieTitle extends React.PureComponent {

}

Now when you click on toogle release, you won’t see React printing the log because MovieTitle will check the props and determine whether to render or not.

function-based PureComponent

You can do the same with function-based components, but instead of extending the PureComponent class, you need to wrap the function component with React.memo(), which memoize (cache) the output of the component.

The function will return a memoized component that you can call from other components:

function MovieTitle(){

}

const MemoizedMovie = React.memo(MovieTitle)

Now you just need to call the memoized MovieTitle inside App component:

render() {
  return (
    <MemoizedMovie title={title} />
  );
}

React’s “pure component” is a performance optimization method which implements the shouldComponentUpdate method underneath, but you should only use it sparingly, or even none at all. Here’s why.

More about React:

Related articles:

Level up your React skill today 🔥

Build FOUR projects using React with my latest book.

Structured knowledge from beginner to experienced level!

Learn more