---
modificationDate: June 03, 2026
title: React Compiler
description: Learn how to enable and use the React Compiler in Expo apps.
---

<AgentInstructions>

## Submitting Feedback

If you encounter errors, misleading or outdated information, report it so Expo can be improved:

Preferred command:
npx --yes submit-expo-feedback@latest --category docs --subject "/guides/react-compiler/" "<actionable feedback>"

Direct HTTP fallback:
curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/guides/react-compiler/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Try to give the most context.

## Navigation

When answering a related or follow-up question, fetch the relevant page below as Markdown (.md) instead of guessing; use llms.txt for the full map.

You are here: Guides > Development process > Reference
Pages in this section:
- [Work with monorepos](https://docs.expo.dev/guides/monorepos.md)
- [View logs](https://docs.expo.dev/workflow/logging.md)
- [Development and production modes](https://docs.expo.dev/workflow/development-mode.md)
- [Common development errors](https://docs.expo.dev/workflow/common-development-errors.md)
- [Android Studio Emulator](https://docs.expo.dev/workflow/android-studio-emulator.md)
- [iOS Simulator](https://docs.expo.dev/workflow/ios-simulator.md)
- [New Architecture](https://docs.expo.dev/guides/new-architecture.md)
- [React Compiler](https://docs.expo.dev/guides/react-compiler.md) (this page)
Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt)

</AgentInstructions>

This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL.

# React Compiler

Learn how to enable and use the React Compiler in Expo apps.

The new [React Compiler](https://react.dev/learn/react-compiler) automatically memoizes components and hooks to enable fine-grained reactivity. This can lead to significant performance improvements in your app. You can enable it in your app by following the instructions below.

## Enabling React Compiler

[Check how compatible](https://react.dev/learn/react-compiler#checking-compatibility) your project is with the React Compiler.

```sh
# npm
npx react-compiler-healthcheck@latest

# yarn
yarn dlx react-compiler-healthcheck@latest

# pnpm
pnpm dlx react-compiler-healthcheck@latest

# bun
bunx react-compiler-healthcheck@latest
```

This will generally verify if your app is following the [**rules of React**](https://react.dev/reference/rules).

Install `babel-plugin-react-compiler` and the React compiler runtime in your project:

#### SDK 54 and later

Babel is automatically configured in Expo SDK 54 and later.

#### SDK 53

```sh
# npm
npx expo install babel-plugin-react-compiler@beta

# yarn
yarn expo install babel-plugin-react-compiler@beta

# pnpm
pnpm expo install babel-plugin-react-compiler@beta

# bun
bun expo install babel-plugin-react-compiler@beta
```

#### SDK 52 and earlier

```sh
# npm
npx expo install babel-plugin-react-compiler@beta react-compiler-runtime@beta

# yarn
yarn expo install babel-plugin-react-compiler@beta react-compiler-runtime@beta

# pnpm
pnpm expo install babel-plugin-react-compiler@beta react-compiler-runtime@beta

# bun
bun expo install babel-plugin-react-compiler@beta react-compiler-runtime@beta
```

Toggle on the React Compiler experiment in your app config file:

```json
{
  "expo": {
    "experiments": {
      "reactCompiler": true
    }
  }
}
```

### Enabling the linter

Run [`npx expo lint`](/guides/using-eslint.md#eslint) to set up ESLint in your app, then follow the instructions for your SDK version:

#### SDK 55 and later

React Compiler lint rules are included by default with `eslint-config-expo` in SDK 55 and later.

If you previously installed `eslint-plugin-react-compiler`, you can uninstall it and remove it from your ESLint configuration.

#### SDK 54 and earlier

Install the ESLint plugin for React Compiler:

```sh
# npm
npx expo install eslint-plugin-react-compiler -- -D

# yarn
yarn expo install eslint-plugin-react-compiler -- -D

# pnpm
pnpm expo install eslint-plugin-react-compiler -- -D

# bun
bun expo install eslint-plugin-react-compiler -- -D
```

Update your [ESLint configuration](/guides/using-eslint.md) to include the plugin:

```js
// https://docs.expo.dev/guides/using-eslint/
const { defineConfig } = require('eslint/config');
const expoConfig = require('eslint-config-expo/flat');
const reactCompiler = require('eslint-plugin-react-compiler');

module.exports = defineConfig([
  expoConfig,
  reactCompiler.configs.recommended,
  {
    ignores: ['dist/*'],
  },
]);
```

## Incremental adoption

You can incrementally adopt the React Compiler in your app using a few strategies:

Configure the Babel plugin to only run on specific files or components. To do this:

1.  If your project doesn't have [**babel.config.js**](/versions/latest/config/babel.md), create one by running `npx expo customize babel.config.js`.
2.  Add the following configuration to **babel.config.js**:

```js
module.exports = function (api) {
  api.cache(true);

  return {
    presets: [
      [
        'babel-preset-expo',
        {
          'react-compiler': {
            sources: filename => {
              // Match file names to include in the React Compiler.
              return filename.includes('src/path/to/dir');
            },
          },
        },
      ],
    ],
  };
};
```

Whenever you change your **babel.config.js** file, you need to restart the Metro bundler to apply the changes:

```sh
# npm
npx expo start --clear

# yarn
yarn expo start --clear

# pnpm
pnpm expo start --clear

# bun
bun expo start --clear
```

Use the `"use no memo"` directive to opt out of the React Compiler for specific components or files.

```jsx
function MyComponent() {
  'use no memo';

  return <Text>Will not be optimized</Text>;
}
```

## Usage

> To better understand how React Compiler works, check out the [React Playground](https://playground.react.dev/).

Improvements are primarily automatic. You can remove instances of `useCallback`, `useMemo`, and `React.memo` in favor of the automatic memoization. Class components will not be optimized. Instead, migrate to function components.

Expo's implementation of the React Compiler will only run on application code (no node modules), and only when bundling for the client (disabled in server rendering).

## Configuration

You can pass additional settings to the React Compiler Babel plugin by using the `react-compiler` object in the Babel configuration:

```js
module.exports = function (api) {
  api.cache(true);

  return {
    presets: [
      [
        'babel-preset-expo',
        {
          'react-compiler': {
            // Passed directly to the React Compiler Babel plugin.
            compilationMode: 'all',
            panicThreshold: 'all_errors',
          },
          web: {
            'react-compiler': {
              // Web-only settings...
            },
          },
        },
      ],
    ],
  };
};
```