The React Compiler

The React Compiler (stable 1.0 since October 2025) is a build-time tool (Babel plugin, integrated into Vite, Next.js and Expo setups) that automatically memoizes components and values, removing most manual useMemo, useCallback and memo. It relies on your code following the Rules of React: pure rendering, no mutation of props/state, hooks called unconditionally. The ESLint plugin (eslint-plugin-react-hooks compiler rules) flags code it can't optimize.

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react({
      babel: { plugins: ["babel-plugin-react-compiler"] },
    }),
  ],
});

// With the compiler, this is memoized automatically:
function Total({ items }: { items: CartItem[] }) {
  const total = items.reduce((s, i) => s + i.price * i.qty, 0);
  return <strong>{formatMoney(total)}</strong>;
}

Common pitfalls

• Mutating values during render — the compiler skips (or breaks) such components.
• Removing all manual memoization before verifying the compiler is active.
• Assuming the compiler fixes algorithmic slowness or huge DOM trees.

Key points

• Automatic memoization at build time
• Requires following the Rules of React
• Lint rules show what can't be compiled

Further reading: react.dev: React Compiler