React Compiler: Automatic Memoization Without useMemo

Re-renders in React are cheap until they aren't. Developers used useMemo, useCallback and React.memo to skip unnecessary work, but getting the dependency arrays right is tedious. React Compiler is a build-time tool that adds this memoization automatically.

What it does

// You write this:
function ProductList({ products, filter }) {
  const visible = products.filter((p) => p.category === filter);
  const onSelect = (id) => track('select', id);
  return visible.map((p) => <ProductCard key={p.id} product={p} onSelect={onSelect} />);
}
// The compiler outputs code that only recomputes 'visible' and 'onSelect'
// when products or filter change, and skips re-rendering unchanged cards.

Enable it in Vite

npm install -D babel-plugin-react-compiler

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

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

Enable it in Next.js

// next.config.js
module.exports = { reactCompiler: true };

Your code must follow the Rules of React

• Components and hooks must be pure: same props and state, same output.
• Don't mutate props, state or values after they're used in JSX.
• Call hooks only at the top level.

The compiler skips components it can't prove safe instead of breaking them. Turn on the React Hooks ESLint plugin's recommended rules to find code that violates the rules.

Should you delete your useMemo calls?

Not in a hurry. Existing memoization keeps working. For new code, write plain components and let the compiler handle it; reach for useMemo only for specific cases such as keeping an effect dependency stable.