React Compiler: can I delete every useMemo?

React Compiler is a build-time tool that analyzes your components and inserts memoization automatically. The result is as if you had written useMemo, useCallback and React.memo everywhere it makes sense — only more granular, because the compiler can memoize individual JSX branches too.

Enabling it in Next.js

pnpm add -D babel-plugin-react-compiler

// next.config.ts
const nextConfig = {
  reactCompiler: true,
};
export default nextConfig;

What changes

// Before
const visible = useMemo(() => todos.filter((t) => !t.done), [todos]);
const onToggle = useCallback((id: string) => toggle(id), [toggle]);
 
// With the compiler
const visible = todos.filter((t) => !t.done);
const onToggle = (id: string) => toggle(id);

Both versions behave the same — the compiler figures out what the value depends on.

So can I delete my existing useMemo calls?

In a new codebase, write them only rarely. In existing code don't rush: the compiler respects manual memoization, and removing it can change the memoization output — which matters most where the value is a useEffect dependency.

Manual memoization is still useful as an escape hatch:

• when you need precise control over when an effect fires (stable references in dependencies),
• when you pass a value to a library that compares references and you want to be explicit.

The Rules of React aren't optional

The compiler assumes your code follows the Rules of React: pure rendering, no mutation of props or state, hooks only at the top level. Components that break the rules are skipped. Turn on the ESLint rules from eslint-plugin-react-hooks (the recommended preset includes the compiler rules) — they'll warn you before a bug reaches production.

You can temporarily opt a problematic component out with the "use no memo" directive.