Capítulo 92 de 116

Chapter 92: React Compiler — Configuration & Directives Reference

Core Idea

Beyond the default zero-config behavior, React Compiler exposes a handful of Babel-plugin options (target, panicThreshold, logger, gating, compilationMode) and two source-level directives ("use memo", "use no memo") for controlling exactly what gets compiled and how failures are handled.

Reference Tables

Option/DirectiveWhat it controls
targetWhich React version's runtime APIs the compiler emits code for — must match the actual React version the app runs on.
panicThresholdHow the compiler reacts when it can't safely compile a piece of code — options generally range from silently skipping that code to failing the build, letting a team choose how strict adoption should be.
loggerA custom callback for the compiler's diagnostic output — useful for piping compilation results into a team's own build tooling/monitoring instead of just console output.
gatingEnables the runtime feature-flag rollout mode described in Ch 44 — compiled and uncompiled versions of a module both ship, switched by a flag.
compilationModeControls which components/Hooks the compiler considers eligible for optimization by default (e.g. "all" vs. an opt-in-only mode), interacting with the "use memo" directive below.
"use memo" (directive)Placed at the top of a function, explicitly opts that function into compilation — the mechanism behind opt-in incremental adoption (Ch 44).
"use no memo" (directive)Placed at the top of a function, explicitly excludes it from compilation — the diagnostic/escape-hatch tool from Ch 45's debugging workflow.
Compiling LibrariesGuidance for library authors: whether/how to ship compiler-optimized code in a published package, given consumers may be on different compiler versions or configurations than the library was built with.

Key Takeaways

  1. target must match the app's actual React version — a mismatch here is a common source of runtime errors after adopting the compiler.
  2. "use memo"/"use no memo" are the source-level, per-function controls; compilationMode/gating are the project-level, config-file controls — they compose together during incremental adoption.
  3. Library authors face an extra consideration (the "Compiling Libraries" guidance) since a published package's compiled output must remain correct regardless of the consuming app's own compiler setup.

Connects To

  • Ch 43 (Installation): where these options are actually wired into a Babel config.
  • Ch 44 (Incremental Adoption): the rollout strategies these settings support.
  • Ch 45 (React Compiler — Debugging and Troubleshooting): the diagnostic use of "use no memo".