#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 to understand its features, current status, and usage.

#How to Use

Modern.js provides built-in support for React Compiler via the source.reactCompiler 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:

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:

npm add react-compiler-runtime

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

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:

export default defineConfig({
  source: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
});

For the complete list of options, see Rsbuild - reactCompiler and the React Compiler configuration docs.

For detailed code, you can refer to the Modern.js & React Compiler example project