Chapter 89: PureComponent (legacy)

Core Idea

PureComponent is the class-component base class that automatically shallow-compares props and state before re-rendering — the legacy, class-based equivalent of wrapping a function component in memo.

Key Concepts

• Extends Component with an automatic shallow comparison: a class extending PureComponent skips its render() call when neither props nor state have shallowly changed since the last render, without needing to implement shouldComponentUpdate manually.
• Same shallow-comparison caveats as memo: an object/array/function prop or state value recreated fresh each time still counts as "changed" under shallow comparison, even with identical contents — the same reference-stability discipline from Ch 59/49 applies.
• Legacy pattern: this exists for class-component codebases; new code should use function components wrapped in memo (Ch 88) instead, which is the direct modern equivalent.
• Not automatically applied: a component must deliberately extend PureComponent rather than the plain Component base class to get this behavior — it's opt-in, not a default optimization for all class components.

Key Takeaways

1. Treat this as the class-era version of memo — same shallow-comparison behavior, same reference-stability requirements to actually benefit from it.
2. New code should reach for memo on function components rather than PureComponent on class components.
3. Like memo, it's an optimization to apply where profiling shows a real benefit, not a default choice.

Connects To

• Ch 88 (memo): the modern, function-component equivalent.
• Ch 79 (Component): the base class this one extends and adds automatic comparison to.