Understanding React Compiler: What It Is, How to Use It, and Its Impact

Preface

At React Conf 2024 the React Compiler was finally open‑sourced; it originally debuted at React Conf 2021 under the name “React Forget” in a talk by Huang Xuan titled “React without memo”.

After Huang joined ByteDance, internal “Ask Me Anything” sessions revealed that the compiler had already been deployed at Meta on large‑scale products such as Instagram, and that React 19 is running internally at Meta. Because Meta operates a single monorepo, upgrading React is handled centrally by the infrastructure team.

What Is the Compiler?

React’s update mechanism re‑renders components whose state changes by diffing from the root node and applying a double‑buffer strategy. While manual memoization is possible, prior to the Compiler React lacked a tokenization concept. The React Compiler gives React a language‑like capability, automatically inserting memo tags via a Babel plugin and performing optimizations similar to those in TypeScript or JavaScript engines like V8 or Hermes.

Savona: “React Compiler is more like TypeScript or a JavaScript engine compiler such as V8 or Hermes. It breaks our code into individual expressions, builds a control‑flow and data‑flow graph, and performs complex optimizations like dead‑code elimination, constant propagation, type inference, and alias analysis.”

How to Use It

Health Check

Run a health‑check to see how many components can be automatically optimized after introducing the compiler:

npx react-compiler-healthcheck@latest

ESLint Plugin Integration

Install the ESLint plugin to detect optimization opportunities:

npm install eslint-plugin-react-compiler

Babel Plugin

Requires React ≥19. Install the Babel plugin:

npm install babel-plugin-react-compiler

Configure Babel (e.g., in babel.config.js ) to run the plugin first:

// babel.config.js
const ReactCompilerConfig = { /* ... */ };

module.exports = function () {
  return {
    plugins: [
      ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
      // ...other plugins
    ],
  };
};

After compilation, the code is transformed to automatically import useMemoCache functions, as shown in the accompanying diagram.

Current Production Impact

Meta’s Instagram, Quest Store and other large apps have adopted the compiler, achieving more than double the speed of the previous version. Initial load time and cross‑page navigation improved by about 12%, with memory usage and crash rates unchanged. Navigation task loading speed increased by at least 4%, and Instagram saw an average 3% gain per route.

For apps like Instagram, even a 1‑2% metric improvement on a single page is considered a significant optimization.

Adoption Guidance

Projects using Webpack or Vite can start integrating after the official React 19 release. The compiler’s stability still requires community observation; teams with lightweight legacy codebases that can upgrade to React 19 should consider early adoption.

Conclusion

The React Compiler is valuable because it provides performance gains without requiring developers to make invasive changes. Although its internals are complex, developers only need to focus on how to enable and consume it.