Skip to content
RedwoodSDK

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 pre-release of RedwoodSDK:

Terminal window
pnpm add rwsdk@pre

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

Terminal window
pnpm add react@canary react-dom@canary react-server-dom-webpack@canary
pnpm add -D babel-plugin-react-compiler@rc @vitejs/plugin-react

Configure Vite

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

vite.config.mts
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