What is a Pure Component in React?

In React interviews, Pure Components are a frequently asked concept because they relate directly to performance optimization.

What is a Pure Component in React?

A Pure Component is a class component in React that only re-renders when there is a change in props or state with a shallow comparison.

It automatically implements shouldComponentUpdate() with a shallow comparison of props and state.

Syntax

import React, { PureComponent } from "react";

class MyComponent extends PureComponent {
  render() {
    console.log("Rendered");
    return <h1>{this.props.name}</h1>;
  }
}

How it works

A PureComponent does this internally:

shouldComponentUpdate(nextProps, nextState) {
  return !shallowEqual(this.props, nextProps) ||
         !shallowEqual(this.state, nextState);
}

So it prevents unnecessary re-renders when:

Props are unchanged
State is unchanged

Shallow Comparison

Shallow comparison means:

Primitive values → compared by value
Objects/arrays → compared by reference (not deep content)

Example:

this.state = {
  user: { name: "John" }
};

If you do:

this.setState({
  user: { name: "John" }
});

Even though content is same, new object reference → re-render happens.

When to use PureComponent

Use it when:

Component renders often with same props/state
You want performance optimization
Data is immutable or treated immutably

When NOT to use it

Avoid PureComponent when:

You mutate objects/arrays directly
You rely on deep nested data changes
You need custom update logic

Functional Equivalent

In modern React, PureComponent is mostly replaced by:

React.memo

const MyComponent = React.memo(function MyComponent(props) {
  return <h1>{props.name}</h1>;
});

It does the same shallow comparison for props.

PureComponent vs Component

Feature	Component	PureComponent
Re-render	Always (by default)	Only if props/state change
Optimization	Manual (`shouldComponentUpdate`)	Built-in
Comparison	None	Shallow comparison

Interview Key Points (Must Say)

If asked in interviews, summarize like this:

A Pure Component in React is a class component that implements shallow comparison on props and state and prevents unnecessary re-renders. It internally uses shouldComponentUpdate to optimize rendering performance. However, it should be used carefully with immutable data structures to avoid incorrect UI updates.

Quick Real-Life Example

Imagine a parent re-rendering frequently:

Normal component → child re-renders every time
PureComponent → child re-renders only if data changes