Installation

Prerequisites

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

Installation

Install React Compiler as adevDependency:

Or with Yarn:

Or with pnpm:

Basic Setup

React Compiler is designed to work by default without any configuration. However, if you need to configure it in special circumstances (for example, to target React versions below 19), refer to thecompiler 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 yourbabel.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';
importreactfrom'@vitejs/plugin-react';

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

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

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

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

Next.js

Please refer to theNext.js docs for more information.

React Router

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

// vite.config.js
import{defineConfig}from"vite";
importbabelfrom"vite-plugin-babel";
import{reactRouter}from"@react-router/dev/vite";

constReactCompilerConfig ={/* ... */};

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

Webpack

A community webpack loader isnow available here.

Expo

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

Metro (React Native)

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

Rspack

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

Rsbuild

Please refer toRsbuild’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:

If you haven’t already configured eslint-plugin-react-hooks, follow theinstallation instructions in the readme. The compiler rules are available in therecommended-latest preset.

The ESLint rule will:

• Identify violations of theRules 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 theReact 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 manualuseMemo 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{cas_c}from"react/compiler-runtime";
exportdefaultfunctionMyApp(){
const$ =_c(1);
lett0;
if($[0] ===Symbol.for("react.memo_cache_sentinel")){
t0 =<div>Hello World</div>;
$[0] =t0;
}else{
t0 =$[0];
}
returnt0;
}

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:

functionProblematicComponent(){
"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 thedebugging guide.

Next Steps

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

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