#React Compiler Experimental

React Compiler can optimize components at compile time, eliminating the need to manually use useMemo, useCallback, and memo. You can use React Compiler in ReactLynx to enhance your application's performance.

#How to Use

Follow these steps to enable React Compiler for ReactLynx in Rspeedy:

1. Install the runtime dependency for React Compiler:

npm install react-compiler-runtime@rc

yarn add react-compiler-runtime@rc

pnpm add react-compiler-runtime@rc

bun add react-compiler-runtime@rc

deno add npm:react-compiler-runtime@rc

2. Install the build-time dependencies for React Compiler:

npm install -D @rsbuild/plugin-babel babel-plugin-react-compiler@rc

yarn add -D @rsbuild/plugin-babel babel-plugin-react-compiler@rc

pnpm add -D @rsbuild/plugin-babel babel-plugin-react-compiler@rc

bun add -D @rsbuild/plugin-babel babel-plugin-react-compiler@rc

deno add -D npm:@rsbuild/plugin-babel npm:babel-plugin-react-compiler@rc

3. Enable React Compiler in the lynx.config.js configuration:

import { defineConfig } from '@lynx-js/rspeedy';
import { pluginBabel } from '@rsbuild/plugin-babel';

export default defineConfig({
  plugins: [
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
      babelLoaderOptions(opts) {
        opts.plugins?.unshift([
          'babel-plugin-react-compiler',
          // See https://react.dev/reference/react-compiler/configuration for config
          {
            // ReactLynx only supports target to version 17
            target: '17',
          },
        ]);
      },
    }),
  ],
});

4. To maximize the benefits of React Compiler, it is recommended to configure the ESLint rule react-hooks/react-compiler to detect code that cannot be optimized. Please refer to React Compiler - ESLint Integration for configuration details.

#Performance Considerations

The React Compiler automatically analyzes your components and injects memoization logic, reducing the need for manual optimizations like useMemo, useCallback, or React.memo. This simplifies your codebase and can deliver significant performance gains during subsequent re-renders, particularly in update-heavy interfaces.

Because the compiler introduces additional runtime logic, it may slightly affect IFR performance or initial background-thread rendering. We recommend enabling React Compiler in cases where initial IFR performance is less critical, or where re-render efficiency and developer experience are the higher priorities.

We’re actively evaluating its impact in ReactLynx and welcome your experiments and feedback to help guide future improvements.