Skip to main content
React Compiler in 2026: What It Actually Memoizes (And What It Doesn't)

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

July 12, 2026
Frontend Engineering
4 min read

Key takeaways

React Compiler automatically inserts memoization — equivalent to useMemo, useCallback, and React.memo — by analyzing data flow at build time. No dependency arrays to write; the compiler generates them.

Enable in Next.js 15 or 16 with one config key: experimental.reactCompiler: true in next.config.ts.

The compiler only memoizes what it can prove is safe — if it cannot verify a value is mutation-free, it skips that component entirely.

"use no memo" is the escape hatch: add it at the top of a function body to tell the compiler to skip that function.

Run npx react-compiler-healthcheck@latest before enabling to see coverage and violations.

What does the React Compiler actually do?

React Compiler — shipped stable with React 19, introduced during development as React Forget — transforms component and hook code at build time to insert memoization automatically. Instead of useMemo with dependency arrays, the compiler analyzes data flow, determines which values are stable across renders, and emits equivalent memoized code. The compiled output still uses React's memo infrastructure at runtime. The compiler ships as babel-plugin-react-compiler and works with any Babel-based build pipeline.

How do we enable React Compiler in Next.js?

Set experimental.reactCompiler to true in next.config.ts. Before enabling, run npx react-compiler-healthcheck@latest — it reports optimizable component count, files with violations, and what patterns are blocking optimization. Fix violations first for maximum coverage on day one.

What does the compiler memoize?

Three categories: components (equivalent to React.memo — re-renders only when props change), values computed during render (equivalent to useMemo), and callbacks (equivalent to useCallback). Dependencies are inferred from escape analysis with no dependency array required.

When does the compiler opt out?

The compiler skips a function and emits it unchanged when it cannot prove memoization is safe. Common cases: mutating props or state directly, reading mutable external references the compiler cannot prove are stable, violations of the Rules of Hooks such as conditional hook calls, and complex let-variable reassignment patterns.

The "use no memo" escape hatch

The string directive "use no memo" at the top of a component or hook body tells the compiler to skip that function entirely. Use it when the compiler output is wrong for a specific function or when wrapping a library that relies on reference instability. The directive is intentionally verbose.

Should we delete useMemo and useCallback after enabling?

For cases the compiler handles: yes, eventually. The healthcheck shows which components are optimized — those are safe to clean up. Keep hand-written memoization for non-optimizable components, useMemo calls that signal intentionally expensive computations, and third-party components you cannot change.

Manual memoization vs React Compiler

With manual hooks, you write dependency arrays, stale closures from wrong deps are a real risk, and only annotated values get memoized. React Compiler infers dependencies, eliminates stale closure risk by design, and covers all optimizable code automatically. The manual escape hatch is removing the hook call; the compiler escape hatch is "use no memo".

FAQ

**Q:** Does React Compiler work without Next.js?

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

**Q:** Will it break existing components?

**A:** The compiler only memoizes what it can prove is correct and emits everything else unchanged. Run the healthcheck first.

**Q:** Does it replace React.memo entirely?

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

**Q:** Can we enable it 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 or newer. The features require React 19's updated memo infrastructure and do not work on React 18.