Automating memoization
Hand written memo, useMemo, and useCallback are error prone and clutter code. The React Compiler analyzes components at build time and inserts the memoization automatically, caching values and components based on what actually changes.
- It tracks which values depend on which inputs
- It memoizes computations and JSX so unchanged parts are reused
- The result behaves as if you had memoized everything optimally
Why it needs the rules
The compiler can only do this safely if your code follows the Rules of React. Components and hooks must be pure, props and state treated as immutable, and side effects kept in effects.
- Mutating props or state during render breaks the assumptions
- The compiler bails out of code it cannot prove safe
- A linter flags violations so the compiler can optimize more
What it does not replace
The compiler handles referential memoization, but you still choose algorithms, list virtualization, and code splitting. It removes manual memo boilerplate, not architectural decisions.
Compiler pipeline
Key idea
The React Compiler inserts memoization at build time so you can drop manual memo and useMemo, but it only optimizes code that follows the Rules of React with pure components and immutable data.