React Compiler best practices

Use when enabling or debugging React Compiler, configuring babel-plugin-react-compiler, or adjusting code so components can be compiled safely.

Mental model

• React Compiler is a build-time optimizer that automatically handles memoization for many components and hooks.
• It is designed to work with code that follows the Rules of React. When patterns are unsafe or ambiguous, the compiler may skip optimization rather than preserve broken assumptions.
• Treat compiler adoption as a correctness-sensitive rollout, not as a blind “performance switch”.

Adoption strategy

• Start with incremental adoption on a bounded area of the codebase when the app is large or legacy-heavy.
• Measure behavior and performance before and after rollout instead of assuming the compiler will help every screen equally.
• Keep the rollout path reversible until the team has confidence in the code patterns and build integration.

Code patterns