Getting Started with React Compiler

Prerequisites

React Compiler is designed to work best with React 19, but it also supports React 17 and 18. Learn more about backwards compatibility.

Installation

Install React Compiler as a devDependency:

Or with Yarn:

Or with pnpm:

Basic Setup

React Compiler is designed to work out of the box without configuration. However, if you need to configure it (for example, to target React versions below 19), refer to the compiler options reference.

The setup process depends on your build tool. React Compiler includes a Babel plugin that integrates with your build pipeline.

Babel

Create or update your babel.config.js:

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

Vite

If you use Vite, you can add the plugin to vite-plugin-react:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
});

Alternatively, if you prefer a separate Babel plugin for Vite:

// vite.config.js
import babel from 'vite-plugin-babel';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react(),
    babel({
      babelConfig: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
});

Next.js

Please refer to the Next.js docs for more information.

Remix

Install vite-plugin-babel, and add the compiler’s Babel plugin to it:

// vite.config.js
import babel from "vite-plugin-babel";

const ReactCompilerConfig = { /* ... */ };

export default defineConfig({
  plugins: [
    remix({ /* ... */}),
    babel({
      filter: /\.[jt]sx?$/,
      babelConfig: {
        presets: ["@babel/preset-typescript"], // if you use TypeScript
        plugins: [
          ["babel-plugin-react-compiler", ReactCompilerConfig],
        ],
      },
    }),
  ],
});

Webpack

A community webpack loader is now available here.

Expo

Please refer to Expo’s docs to enable and use the React Compiler in Expo apps.

Metro (React Native)

React Native uses Babel via Metro, so refer to the Usage with Babel section for installation instructions.

Rspack

Please refer to Rspack’s docs to enable and use the React Compiler in Rspack apps.

Rsbuild

Please refer to Rsbuild’s docs to enable and use the React Compiler in Rsbuild apps.

ESLint Integration

React Compiler includes an ESLint rule that helps identify code that can’t be optimized. When the ESLint rule reports an error, it means the compiler will skip optimizing that specific component or hook. This is safe: the compiler will continue optimizing other parts of your codebase. You don’t need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components.

Install the ESLint plugin:

Then enable the compiler rule in your ESLint configuration:

// .eslintrc.js
module.exports = {
  rules: {
    'react-hooks/react-compiler': 'error',
  },
};

The ESLint rule will:

• Identify violations of the Rules of React
• Show which components can’t be optimized
• Provide helpful error messages for fixing issues

Verify Your Setup

After installation, verify that React Compiler is working correctly.

Check React DevTools

Components optimized by React Compiler will show a “Memo ✨” badge in React DevTools:

1. Install the React Developer Tools browser extension
2. Open your app in development mode
3. Open React DevTools
4. Look for the ✨ emoji next to component names

If the compiler is working:

• Components will show a “Memo ✨” badge in React DevTools
• Expensive calculations will be automatically memoized
• No manual useMemo is required

Check Build Output

You can also verify the compiler is running by checking your build output. The compiled code will include automatic memoization logic that the compiler adds automatically.

import { c as _c } from "react/compiler-runtime";
export default function MyApp() {
  const $ = _c(1);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = <div>Hello World</div>;
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  return t0;
}

Troubleshooting

Opting out specific components

If a component is causing issues after compilation, you can temporarily opt it out using the "use no memo" directive:

function ProblematicComponent() {
  "use no memo";
  // Component code here
}

This tells the compiler to skip optimization for this specific component. You should fix the underlying issue and remove the directive once resolved.

For more troubleshooting help, see the debugging guide.

Next Steps

Now that you have React Compiler installed, learn more about:

• Backwards compatibility for React 17 and 18
• Configuration options to customize the compiler
• Incremental adoption strategies for existing codebases
• Debugging techniques for troubleshooting issues
• Library authors guide for compiling your React library