What is PureComponent in React?

React Beginner Questions - Set 4

A class component with a built-in shallow `shouldComponentUpdate`. The manual version shows exactly what it does and what it misses.

Example

import { Component, PureComponent } from 'react';

// What PureComponent does for you
class Manual extends Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.value !== this.props.value;   // shallow, one field
  }
  render() { return <p>{this.props.value}</p>; }
}

class Pure extends PureComponent {
  render() { return <p>{this.props.value}</p>; }
}

// Both skip the render when the shallow comparison is equal
<Pure value={{ n: 1 }} />   {/* new object each render: always re-renders */}

What to notice

Shallow means one level: nested changes inside the same object are invisible to it.
The function-component equivalents are `React.memo` for props and `useMemo` for values.
Mutating an object in place makes the comparison pass and the UI go stale.

← Back to the question list