✅ What Is `PureComponent` in React?

In React, PureComponent is similar to a regular Component, but with one important difference:
it automatically performs a shallow comparison of both props and state before deciding whether the component should re-render.

If React finds no change, it skips the re-render, which can significantly improve performance—especially in large applications.

You can think of PureComponent as
Component + built-in shouldComponentUpdate

🎯 Why Use `PureComponent`?

Using PureComponent helps when your UI updates frequently but the actual data rarely changes.

Key Benefits

Prevents unnecessary re-renders
Improves performance in complex UIs
Reduces rendering cost in large component trees

Important Limitation

PureComponent only performs a shallow comparison, so it works best with:

Primitive values (string, number, boolean)
Immutable objects and arrays

It may behave incorrectly if you mutate objects or arrays directly.

🔧 Example 1: Without `PureComponent`

import React, { Component } from "react";

class RegularComp extends Component {
  render() {
    console.log("Regular Component Rendered");
    return <h2>Hello {this.props.name}</h2>;
  }
}

class App extends Component {
  state = { name: "React" };

  componentDidMount() {
    setInterval(() => {
      this.setState({ name: "React" }); // same value every time
    }, 2000);
  }

  render() {
    return <RegularComp name={this.state.name} />;
  }
}

export default App;

Result

Even though the value of name never changes, the component re-renders every 2 seconds.
That’s because Component does not check whether the value actually changed.

🔧 Example 2: With `PureComponent`

import React, { PureComponent, Component } from "react";

class PureComp extends PureComponent {
  render() {
    console.log("Pure Component Rendered");
    return <h2>Hello {this.props.name}</h2>;
  }
}

class App extends Component {
  state = { name: "React" };

  componentDidMount() {
    setInterval(() => {
      this.setState({ name: "React" }); // same value every time
    }, 2000);
  }

  render() {
    return <PureComp name={this.state.name} />;
  }
}

export default App;

Result

The component renders only once.
Since the name prop remains the same, PureComponent detects no change and skips re-rendering automatically.

🧠 Key Concepts Behind `PureComponent`

Concept	Explanation
Shallow comparison	Compares top-level props and state values
Automatic optimization	Built-in `shouldComponentUpdate`
Performance boost	Prevents unnecessary DOM updates
Limitation	Cannot detect deep changes in nested objects

📚 `Component` vs `PureComponent`

Feature	`Component`	`PureComponent`
Re-render behavior	Always re-renders on update	Skips render if data is unchanged
Performance optimization	Manual	Automatic
Shallow comparison	❌ No	✅ Yes
Risk of stale UI	Low	Possible if data is mutated

✅ Best Practices

Use PureComponent when props and state are immutable
Avoid mutating objects or arrays directly
Prefer immutability (spread, map, filter)
Don’t overuse it—small components won’t gain much
For functional components, use React.memo (equivalent of PureComponent)

🧾 Final Thoughts

PureComponent is a powerful performance optimization tool in React.
It behaves like a regular component but avoids unnecessary re-renders by shallowly comparing props and state.

Use `PureComponent` when:

Your component renders frequently
Props are immutable
Performance matters

Avoid it when:

Props are deeply nested and frequently mutated
You need full control over update logic

Rule of thumb:
If your data is immutable, PureComponent works beautifully.
If not, it can silently introduce bugs.

React PureComponent Explained with Example