> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# React Compiler

React Compiler is a build-time compiler from the React team that reduces unnecessary re-renders through automatic memoization, without manually writing `useMemo`, `useCallback`, or `React.memo`.

Before starting to use React Compiler, it is recommended to read the [React Compiler documentation](https://react.dev/learn/react-compiler) to understand its features, current status, and usage.

## How to Use

Modern.js provides built-in support for React Compiler via the [source.reactCompiler](/configure/app/source/react-compiler.md) option, powered by the Rust-based React Compiler implementation in Rspack's `builtin:swc-loader`. It reuses Rspack's built-in SWC transform chain without introducing Babel (`babel-plugin-react-compiler`).

This capability is **disabled by default** and must be enabled explicitly for any React version.

### React 19

If you are using React 19, simply enable `source.reactCompiler` — no additional dependencies are required:

```ts title="modern.config.ts"
import { appTools, defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  source: {
    reactCompiler: true,
  },
  plugins: [appTools()],
});
```

### React 18

If you are using React 18, configure it as follows:

1. Install `react-compiler-runtime` as a **runtime dependency** to allow the compiled code to run on versions before React 19:

```bash
npm add react-compiler-runtime
```

2. Specify the React version via `target` in the configuration:

```ts title="modern.config.ts"
import { appTools, defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  source: {
    reactCompiler: {
      target: '18',
    },
  },
  plugins: [appTools()],
});
```

## Customize Compilation Behavior

`source.reactCompiler` accepts an object to configure the compilation behavior, with the same options as Rspack's `jsc.transform.reactCompiler`. For example, use `compilationMode: 'annotation'` to only compile functions annotated with the `"use memo"` directive, enabling React Compiler incrementally:

```ts title="modern.config.ts"
export default defineConfig({
  source: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
});
```

For the complete list of options, see [Rsbuild - reactCompiler](https://rsbuild.rs/plugins/list/plugin-react#reactcompiler) and the [React Compiler configuration docs](https://react.dev/reference/react-compiler/configuration).

> For detailed code, you can refer to the [Modern.js & React Compiler example project](https://github.com/web-infra-dev/modern.js/tree/main/examples/react-compiler)