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.

The React Compiler runs through a Babel plugin.

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

bashnpm install -D babel-plugin-react-compiler

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

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

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

jsimport { 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:

tsexport 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.