Explore Pure Components in React

While working on large-scale React applications, I quickly noticed performance issues caused by unnecessary re-renders. That’s when I leaned on Pure Components to optimize my code and keep the UI snappy.

In this tutorial, I’ll walk you through what Pure Components are, how they work, and how you can use them in your own React projects.

I’ll also share complete code examples that you can copy and test right away.

What is a Pure Component in React?

A Pure Component is like a regular React class component, but with one key difference: It automatically implements a shallow comparison of props and state.

That means React will skip re-rendering the component if nothing has actually changed. This simple optimization can save a lot of unnecessary work in big applications.

Think of it as React’s way of saying: “Why redraw the same thing on the screen if nothing has changed?”

Method 1 – Use React.PureComponent

The most direct way to create a Pure Component is by extending React.PureComponent instead of React.Component.

Here’s a full example:

import React, { PureComponent } from "react";

class UserCard extends PureComponent {
  render() {
    console.log("Rendering:", this.props.name);
    return (
      <div style={{ border: "1px solid #ccc", padding: "10px", margin: "5px" }}>
        <h3>{this.props.name}</h3>
        <p>Location: {this.props.location}</p>
      </div>
    );
  }
}

export default function App() {
  return (
    <div>
      <UserCard name="John Doe" location="New York, USA" />
      <UserCard name="Jane Smith" location="Los Angeles, USA" />
    </div>
  );
}

You can refer to the screenshot below to see the output.

Explanation:

• By extending PureComponent, React will only re-render UserCard if name or location changes.
• This makes it ideal for static or rarely changing props.

Method 2 – Use React.memo with Functional Components

Most of my new projects use functional components with hooks. For these, the equivalent of PureComponent is React.memo.

Here’s how it works:

import React from "react";

const UserCard = React.memo(function UserCard({ name, location }) {
  console.log("Rendering:", name);
  return (
    <div style={{ border: "1px solid #ccc", padding: "10px", margin: "5px" }}>
      <h3>{name}</h3>
      <p>Location: {location}</p>
    </div>
  );
});

export default function App() {
  return (
    <div>
      <UserCard name="Alice Johnson" location="Chicago, USA" />
      <UserCard name="Robert Brown" location="Houston, USA" />
    </div>
  );
}

You can refer to the screenshot below to see the output.

Explanation:

• React.memo wraps the functional component and prevents re-rendering if props don’t change.
• It’s the go-to choice for modern React apps.

Method 3 – Custom shouldComponentUpdate

Before Pure Components, I often had to manually control re-renders using shouldComponentUpdate. This method still works today if you need fine-grained control.

import React, { Component } from "react";

class UserCard extends Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.name !== this.props.name || nextProps.location !== this.props.location;
  }

  render() {
    console.log("Rendering:", this.props.name);
    return (
      <div style={{ border: "1px solid #ccc", padding: "10px", margin: "5px" }}>
        <h3>{this.props.name}</h3>
        <p>Location: {this.props.location}</p>
      </div>
    );
  }
}

export default function App() {
  return (
    <div>
      <UserCard name="Michael Scott" location="Scranton, USA" />
      <UserCard name="Dwight Schrute" location="Scranton, USA" />
    </div>
  );
}

You refer to the screenshot below to see the output.

Explanation:

• shouldComponentUpdate compares old and new props manually.
• It’s more verbose but gives you total control over rendering logic.

When Should You Use Pure Components?

From my experience, Pure Components shine in these scenarios:

• Lists of items: e.g., rendering thousands of user cards or product listings.
• Static props: components that rarely change (like a profile card).
• Performance bottlenecks: when you notice slow UI updates due to re-renders.

But keep in mind:

• Shallow comparison only checks the first level of props.
• If you pass complex objects or arrays, Pure Components may not behave as expected.

Key Differences Between Component, PureComponent, and React.memo

Conclusion

Pure Components are one of those small optimizations that can make a big difference in real-world React apps. I’ve used them in dashboards, reporting tools, and even e-commerce apps where performance matters most.

Whether you go with PureComponent for class components or React.memo for functional ones, the idea is the same: avoid re-rendering when nothing has changed.

If you apply these methods thoughtfully, your React apps will feel faster and smoother—without adding much complexity.

You may also like to read other React articles:

• How to Mock a React Component in Jest
• React Error Boundaries in Functional Components
• Use the React Data Grid Component
• Call a Function Inside a Child Component from the Parent in React

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/