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
Section titled “Install”First, you’ll need to be on the latest release of RedwoodSDK:
pnpm add rwsdk@latestNext, install the React Compiler Babel plugin, and Vite’s React plugin.
pnpm add react@latest react-dom@latest react-server-dom-webpack@latestpnpm add -D babel-plugin-react-compiler@latest @vitejs/plugin-react@latestConfigure Vite
Section titled “Configure Vite”Enable the compiler by adding the React plugin with the compiler Babel plugin. Place it before the Cloudflare and Redwood 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
Section titled “Troubleshooting”- After enabling, if HMR behaves oddly, clear Vite cache:
rm -rf node_modules/.viteand restart the dev server.
Verify Your Setup
Section titled “Verify Your Setup”Check React DevTools:
- Install the React Developer Tools browser extension
- Open your app in development mode
- Open React DevTools
- 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
useMemois required
Source: React Compiler Installation