DEV Community

Ahmed Mahmoud
Ahmed Mahmoud

Posted on • Originally published at devya.dev

React Compiler in 2026: What It Actually Memoizes (And What It Doesn't)

#nextjs #performance #react #webdev

Headline: React Compiler — formerly React Forget — shipped stable with React 19 and automatically memoizes components, hooks, and callbacks by analyzing data flow at build time. No dependency arrays to write; the compiler infers them. Here is what it handles, when it opts out, and whether you should delete your useMemo calls.

Key takeaways

  • React Compiler inserts useMemo, useCallback, and React.memo automatically at build time — no dependency arrays to maintain.
  • Enable it in Next.js 15/16 with experimental.reactCompiler: true in next.config.ts.
  • The compiler is conservative: if it cannot prove memoization is safe, it emits the component unchanged.
  • "use no memo" is the escape hatch for functions the compiler should not touch.
  • Run npx react-compiler-healthcheck@latest before enabling to see coverage and violations.

What does React Compiler actually do?

React Compiler transforms component and hook code at build time to insert memoization automatically. Instead of useMemo(() => expensiveCalc(a, b), [a, b]), the compiler analyzes data flow, determines which values are stable across renders, and emits equivalent memoized code. The compiled output uses React's memo infrastructure at runtime. The compiler is babel-plugin-react-compiler — it works with any Babel-based build pipeline.

How do I enable it in Next.js? 

// next.config.ts
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
export default nextConfig;
Enter fullscreen mode Exit fullscreen mode

Before enabling, run the healthcheck:

npx react-compiler-healthcheck@latest
Enter fullscreen mode Exit fullscreen mode

The healthcheck reports optimizable component count, files with violations, and blocking patterns. Fix violations first for more coverage on day one.

What does the compiler memoize?

  • Components — equivalent to React.memo; re-renders only when props change.
  • Values — equivalent to useMemo; computed results, derived arrays, objects.
  • Callbacks — equivalent to useCallback: event handlers, functions passed as props.

Dependencies are inferred from escape analysis — no dependency array needed.

When does it opt out?

The compiler skips a function and emits it unchanged when:

  • Props/state mutated directly — props.items.push(x) violates React rules; compiler detects and opts out.
  • Mutable external references read — a singleton the compiler cannot prove is stable.
  • Rules of Hooks violated — hooks called conditionally cause the whole file to be skipped.
  • Complex let reassignment — non-obvious variable flows the compiler cannot track.

The "use no memo" escape hatch 

function MyComponent({ data }: { data: unknown }) {
  "use no memo";
  return <div>{JSON.stringify(data)}</div>;
}
Enter fullscreen mode Exit fullscreen mode

Use when compiler output is wrong for a specific function or you are wrapping a library relying on reference instability. Intentionally verbose — should feel deliberate.

Should I delete useMemo and useCallback?

For components the compiler handles: yes, eventually. The healthcheck shows which are optimized — those are safe to clean up. Keep manual memoization for non-optimizable components, useMemo as a semantic signal for expensive computations, and third-party components you cannot change.

Manual vs compiler memoization

Dimension Manual hooks React Compiler
Dependency arrays You write them Compiler infers
Stale closure risk Real — wrong deps cause bugs Eliminated
Coverage Only annotated values All optimizable code
Escape hatch Remove the hook call "use no memo"

FAQ

Q: Does it work without Next.js?

A: Yes — babel-plugin-react-compiler works with Vite, webpack, or any Babel pipeline. Next.js's experimental.reactCompiler is a convenience wrapper.

Q: Will it break existing components?

A: No — it only memoizes what it can prove is correct and leaves everything else unchanged. Run the healthcheck first.

Q: Does it replace React.memo?

A: For fully analyzable components, yes. React.memo on compiler-skipped components still adds value.

Q: Can I enable gradually?

A: Yes — pass an includes filter to babel-plugin-react-compiler to target specific directories.

Q: What React version is required?

A: React 19+. Does not work on React 18.

Originally published on devya.dev. Also on eng-ahmed.com. Built by Devya Solutions.

Top comments (0)