Chapter 43: React Compiler — Installation

Core Idea

Installing React Compiler means adding it as a Babel plugin to an existing build pipeline, plus its companion ESLint plugin for editor/CI feedback — a config-and-tooling step, not a code migration.

Key Concepts

Prerequisites: a React 17+ codebase (React 19 gets the most direct support) using a Babel-based build pipeline (directly, or via a framework/bundler that runs Babel under the hood).
Basic setup: install the compiler's Babel plugin package, then register it in the project's Babel configuration (framework-specific config wiring, e.g. Next.js/Vite plugin options, differs per toolchain but the underlying mechanism is the same Babel plugin).
ESLint integration: the compiler ships a companion ESLint plugin (eslint-plugin-react-hooks's newer rules, or a dedicated compiler rule set) that flags code the compiler can't safely optimize before build time — catching Rules-of-React violations in the editor rather than silently skipping optimization at build time.
Verifying the setup: after wiring it in, a successful install is confirmed by the compiler actually running during a build (visible via its output/logs) and by seeing components skip unnecessary re-renders in the Profiler.
Troubleshooting: covers the common early hiccups — plugin ordering relative to other Babel plugins, and confirming the compiler is actually being invoked rather than silently skipped by a misconfigured pipeline.

Key Takeaways

Installation is Babel-plugin-and-config work, scoped to your build tool, not a source-code migration.
Wire up the companion ESLint plugin at the same time as the Babel plugin — it's the fast feedback loop for code the compiler can't safely handle.
Confirming the compiler actually ran (build output, Profiler behavior) is a necessary verification step — a silently-skipped compiler produces no errors, just no benefit.

Connects To

Ch 42 (React Compiler — Introduction): what the tool being installed here actually does.
Ch 44 (Incremental Adoption): rolling this out gradually across an existing large codebase.
Ch 92 (React Compiler — Configuration & Directives Reference): options available once installed.