⚛️ React `Component` vs `PureComponent` — What’s the Difference?

When working with class components in React, you’ll often see two base classes:

React.Component
React.PureComponent

At first glance, they look almost the same. They both render UI, manage state, and receive props.
But under the hood, they behave very differently—especially when it comes to performance.

Understanding this difference helps you avoid unnecessary re-renders and write faster, more predictable React applications.

✅ What Is `React.Component`?

React.Component is the default base class for class components.

By default, a component that extends Component will re-render whenever its parent re-renders or its state changes, even if the props or state values are logically the same.

Key Characteristics

Re-renders on every parent render
No built-in optimization
Full control via shouldComponentUpdate
Safer when working with mutable data

Example

import React, { Component } from "react";

class RegularChild extends Component {
  render() {
    console.log("RegularChild render:", this.props.name);
    return <h2>Hello {this.props.name}</h2>;
  }
}

👉 This component renders every time its parent renders—no questions asked.

✅ What Is `React.PureComponent`?

React.PureComponent is similar to Component, but with a built-in optimization.

It automatically implements shouldComponentUpdate using a shallow comparison of:

this.props
this.state

If nothing has changed at the top level, React skips the re-render.

Key Characteristics

Performs shallow comparison of props and state
Skips unnecessary renders
Improves performance
Requires immutable updates

Example

import React from "react";

class PureChild extends React.PureComponent {
  render() {
    console.log("PureChild render:", this.props.name);
    return <h2>Hello {this.props.name}</h2>;
  }
}

👉 This component only re-renders if React detects a new reference in props or state.

📊 Component vs PureComponent (Quick Comparison)

Feature	Component	PureComponent
Re-render behavior	Always re-renders	Skips render if props/state are shallowly equal
Performance	May cause extra renders	Optimized
Built-in SCU	❌ No	✅ Yes
Data handling	Works with mutable data	Requires immutability
Best for	Full control, complex logic	Performance-sensitive components

🔧 Practical Example (Mutation vs Immutability)

Let’s look at a real-world scenario where things can go wrong.

class Parent extends React.Component {
  state = {
    user: { name: "Alice" },
    count: 0
  };

  reRenderParent = () =>
    this.setState(s => ({ count: s.count + 1 }));

  mutateUserInPlace = () => {
    this.state.user.name = "Alice (mutated)";
    this.setState(s => ({ count: s.count + 1 }));
  };

  updateUserImmutably = () => {
    this.setState(s => ({
      user: { ...s.user, name: "Alice (new)" },
      count: s.count + 1
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.reRenderParent}>Re-render parent</button>
        <button onClick={this.mutateUserInPlace}>Mutate user</button>
        <button onClick={this.updateUserImmutably}>Update immutably</button>

        <RegularChild user={this.state.user} />
        <PureChild user={this.state.user} />
      </div>
    );
  }
}

Expected Behavior

Re-render parent
- RegularChild → re-renders
- PureChild → skips render
Mutate user in place ❌
- RegularChild → updates
- PureChild → does NOT update (stale UI)
Update immutably ✅
- Both components re-render correctly

Why This Happens

PureComponent only checks references, not deep values.

this.state.user === nextState.user // true (mutation)

So React thinks nothing changed.

✅ Best Practices

Use PureComponent only with immutable data
Never mutate objects or arrays in place
Prefer Component when:
- Data is mutable
- You need custom update logic
For function components, use React.memo (PureComponent equivalent)
Measure performance before optimizing

🧾 Final Thoughts

Component → always re-renders, safest and most flexible
PureComponent → skips renders, faster but stricter

If your app follows immutability rules, PureComponent can give you a big performance boost.
If not, it can silently break your UI.

Optimization is powerful—but only when you understand the rules.

React Component vs PureComponent: Key Differences