React 19+ · Class

PureComponent

PureComponent is a React class base that shallowly compares props and state to skip unnecessary re-renders. It supports the Component APIs but is mainly intended for existing class components, since new code should generally use functions.

How it works

PureComponent is a Component subclass for class components that shallowly compares props and state before updating. React can skip the class component's re-render when those values are unchanged, while context changes can still cause a re-render.

Syntax

class MyComponent extends PureComponent { render() { return ...; } }

Returns

A React class component base class; subclasses render their UI through the Component APIs.

Key points

It can avoid a class component's update when incoming props and local state remain the same.
You can use the lifecycle methods and other APIs available on Component.
PureComponent provides an optimization for class children of frequently re-rendering parents.
The skip applies when both the new props and state match the previous values.
Declare the optimization by extending PureComponent instead of Component.

Common mistakes

Use PureComponent for existing class-based code; React recommends function components for new code.
The comparison is shallow, so changing an object or array in place can prevent React from detecting the intended update.

Example: A PureComponent that renders a greeting

import { PureComponent } from 'react';

class Greeting extends PureComponent<{ name: string }> {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default function App() {
  return <Greeting name="Ada" />;
}

This class skips its own re-render when its props and state are shallowly unchanged.

When to use it

Skip unchanged class updates

Optimizing an existing class component whose parent re-renders often.

Use shallow equality effectively

Rendering immutable props and state where shallow comparison reliably reflects meaningful changes.

Maintain class components

Migrating or maintaining legacy class-based React code.

Component
shouldComponentUpdate

Source: PureComponent - React. Checked 2026-10-15.