Chapter 44: React Compiler — Incremental Adoption

Core Idea

For an existing large codebase, React Compiler doesn't have to be an all-or-nothing switch — directory-based rollout, an opt-in "use memo" directive, and runtime feature-flag gating all let a team apply it to a subset of the app first and expand coverage gradually.

Key Concepts

Why incremental: a large codebase may have code that unknowingly violates the Rules of React in ways that only matter once the compiler starts optimizing around them — rolling out gradually limits the blast radius of surprises to whatever subset is currently opted in.
Directory-based adoption via Babel overrides: configure the Babel plugin to only run against specific directories/glob patterns, expanding the included paths over time as each area is verified safe.
Opt-in mode with "use memo": a per-file (or per-function) directive that marks specific code as eligible for compilation, inverting the default so only explicitly-opted-in code is touched — useful for adopting compiler optimization surgically rather than directory-wide.
Runtime feature flags with gating: a "gating" mode lets the compiled and non-compiled code paths both ship, switched at runtime by a feature flag — enables A/B testing the compiler's effect in production before fully committing.
Troubleshooting adoption: when a specific component misbehaves after compilation, the fix is almost always to find and correct the Rules-of-React violation the compiler exposed, not to fight the compiler — the compiler surfaces latent bugs rather than causing new ones.

Code Examples

// "use memo" directive: opt this function in explicitly under opt-in mode
function ExpensiveList({ items }) {
  "use memo";
  // ...
}

What it demonstrates: the directive-based opt-in path for applying the compiler surgically to one function rather than a whole directory.

Key Takeaways

Directory-based rollout is the default recommended incremental path; "use memo" and gating exist for finer-grained or safer (runtime-flagged) control.
A component breaking after compilation is diagnostic information — it means that component already violated the Rules of React, and manual memoization was previously masking the symptom.
None of the three adoption strategies are mutually exclusive — a team can combine directory scoping with gating during a cautious production rollout.

Connects To

Ch 43 (Installation): the base setup these adoption strategies build on.
Ch 45 (Debugging and Troubleshooting): diagnosing the Rules-of-React violations this rollout process surfaces.
Ch 92 (React Compiler — Configuration & Directives Reference): the full reference for "use memo", "use no memo", and gating.