React Compiler

Rasengan.js includes support for the React Compiler, a tool designed to improve performance by automatically optimizing component rendering. This reduces the need for manual memoization using useMemo and useCallback.

How It Works

The React Compiler runs through a Babel plugin. To use it, install the babel-plugin-react-compiler:

npm install -D babel-plugin-react-compiler

Then, add reactCompiler option in rasengan.config.js via the sageMode option:

import { defineConfig } from 'rasengan';
import { rasengan } from 'rasengan/plugin';
 
export default defineConfig({
  sageMode: {
    reactCompiler: true
  },
  vite: {
    plugins: [rasengan()],
  },
});

Annotations

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

import { defineConfig } from 'rasengan';
import { rasengan } from 'rasengan/plugin';
 
export default defineConfig({
  sageMode: {
    reactCompiler: {
      compilationMode: 'annotation';
    }
  },
  vite: {
    plugins: [rasengan()],
  },
});

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

export default function Page() {
  'use memo'
  // ...
}