---
title: reactCompiler
description: Enable the React Compiler to automatically optimize component rendering.
url: "https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler"
docs_index: /docs/llms.txt
lastUpdated: 2026-10-02
prerequisites:
  - "Configuration: /docs/app/api-reference/config"
  - "next.config.js: /docs/app/api-reference/config/next-config-js"
---

> For an index of all documentation, see [/docs/llms.txt](/docs/llms.txt).

Next.js includes support for the [React Compiler](https://react.dev/learn/react-compiler/introduction), a tool designed to improve performance by automatically optimizing component rendering. This reduces the need for manual memoization using `useMemo` and `useCallback`.

Next.js includes a custom performance optimization written in SWC that makes the React Compiler more efficient. Instead of running the compiler on every file, Next.js analyzes your project and only applies the React Compiler to relevant files. This avoids unnecessary work and leads to faster builds compared to using the Babel plugin on its own.

## How It Works

The React Compiler runs through a Babel plugin. To keep builds fast, Next.js uses a custom SWC optimization that only applies the React Compiler to relevant files—like those with JSX or React Hooks.

This avoids compiling everything and keeps the performance cost minimal. You may still see slightly slower builds compared to the default Rust-based compiler, but the impact is small and localized.

To use it, install the `babel-plugin-react-compiler`:

```bash
pnpm add -D babel-plugin-react-compiler
```

```bash
npm install -D babel-plugin-react-compiler
```

```bash
yarn add -D babel-plugin-react-compiler
```

```bash
bun add -D babel-plugin-react-compiler
```

Then, add `reactCompiler` option in `next.config.js`:

```ts title="next.config.ts" 
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  reactCompiler: true,
}

export default nextConfig
```

```js title="next.config.js" 
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactCompiler: true,
}

module.exports = nextConfig
```

## Annotations

You can configure the compiler to run in "opt-in" mode as follows:

```ts title="next.config.ts" 
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  reactCompiler: {
    compilationMode: 'annotation',
  },
}

export default nextConfig
```

```js title="next.config.js" 
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactCompiler: {
    compilationMode: 'annotation',
  },
}

module.exports = nextConfig
```

Then, you can annotate specific components or hooks with the `"use memo"` directive from React to opt-in:

```ts title="app/page.tsx" 
export default function Page() {
  'use memo'
  // ...
}
```

```js title="app/page.js" 
export default function Page() {
  'use memo'
  // ...
}
```

> **Note:**
>
> You can also use the `"use no memo"` directive from React for the opposite effect, to opt-out a component or hook.

## Existing memoization guarantees

You can configure whether the compiler preserves existing memoization guarantees from `useMemo`, `useCallback`, and `React.memo`:

```ts title="next.config.ts" 
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  reactCompiler: {
    environment: {
      enablePreserveExistingMemoizationGuarantees: false,
    },
  },
}

export default nextConfig
```

```js title="next.config.js" 
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactCompiler: {
    environment: {
      enablePreserveExistingMemoizationGuarantees: false,
    },
  },
}

module.exports = nextConfig
```

When omitted, Next.js uses the default from the active React Compiler implementation. Because defaults may differ between compiler implementations and versions, set this option explicitly to ensure consistent behavior.

## Version History

| Version   | Changes                                                                                                         |
| --------- | --------------------------------------------------------------------------------------------------------------- |
| `v16.0.0` | `reactCompiler` stabilized and moved from `experimental.reactCompiler` to the top-level `reactCompiler` option. |

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/docs/llms.txt](/docs/llms.txt)