React Compiler

The React Compiler can optimize your components automatically. RedwoodSDK works with the compiler via Vite — you only need to add the Babel plugin and runtime, and enable it in your Vite config.

Install

First, you'll need to be on the latest release of RedwoodSDK:

pnpm add rwsdk@latest

Next, install the React Compiler Babel plugin, and Vite's React plugin.

pnpm add react@latest react-dom@latest react-server-dom-webpack@latest
pnpm add -D babel-plugin-react-compiler@latest @vitejs/plugin-react@latest

Configure Vite

Enable the compiler by adding the React plugin with the compiler Babel plugin. Place it before the Cloudflare and RedwoodSDK plugins.

import { defineConfig } from "vite";
import { redwood } from "rwsdk/vite";
import { cloudflare } from "@cloudflare/vite-plugin"; 
import react from "@vitejs/plugin-react"; 

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ["babel-plugin-react-compiler"],
      },
    }),
    cloudflare({
      viteEnvironment: { name: "worker" },
    }),
    redwood(),
  ],
});

If you already have a Vite config, simply add this to your plugins:

react({
  babel: {
    plugins: ["babel-plugin-react-compiler"],
  },
}),

Troubleshooting

• After enabling, if HMR behaves oddly, clear Vite cache: rm -rf node_modules/.vite and restart the dev server.

Verify Your Setup

Check React DevTools:

1. Install the React Developer Tools browser extension
2. Open your app in development mode
3. Open React DevTools
4. Look for the ✨ emoji next to component names

If the compiler is working:

• Components will show a “Memo ✨” badge in React DevTools
• Expensive calculations will be automatically memoized
• No manual useMemo is required

Source: React Compiler Installation