React Compiler in 2026: Stable, Production-Ready, and Worth Enabling

The short answer

React Compiler is stable. It shipped stable in late 2025, and if you started a Next.js project any time in the past year you're already running it — create-next-app has enabled it by default since v15.

If you're on an existing codebase wondering whether to opt in: yes. One exception, covered at the end.

---

What it actually does

The compiler handles automatic memoization across your component tree at build time. Every useCallback, useMemo, and React.memo you added to stop unnecessary re-renders — that's the compiler's job now. And it does it better, because it can see your entire data flow statically. You couldn't.

Here's what that looks like in practice:

// Before — manual memoization required
function ProductList({ category, onAdd }) {
  const filtered = useMemo(
    () => products.filter(p => p.category === category),
    [products, category]
  )
  const handleAdd = useCallback((id) => onAdd(id), [onAdd])

  return filtered.map(p => <Product key={p.id} product={p} onAdd={handleAdd} />)
}

// With the compiler — same guarantees, no manual hooks
function ProductList({ category, onAdd }) {
  const filtered = products.filter(p => p.category === category)
  const handleAdd = (id) => onAdd(id)

  return filtered.map(p => <Product key={p.id} product={p} onAdd={handleAdd} />)
}

The compiler analyses both versions at build time and produces identical memoization guarantees. The second version isn't less optimized — it's the same output, minus the boilerplate you were maintaining by hand.

Two things follow from this.

Your old performance instincts are wrong now. Wrapping a callback in useCallback when the compiler is active doesn't help. In some patterns it actively fights the compiler's analysis and produces worse output than doing nothing. If you still reach for useCallback by reflex on every callback prop, stop.

The remaining performance work has moved up the stack. Once re-renders are automated, the bottlenecks live in architecture: what runs server-side vs. client, how data fetching is structured, where Suspense boundaries go. These require judgment — there's no mechanical fix for them, and the compiler doesn't pretend there is.

---

Adoption

For new projects it's settled — Next.js has enabled the compiler by default since v15. Any project bootstrapped in the past year is running it, whether the team thought about it or not.

For existing codebases it's more gradual. Most teams enable it incrementally through annotation mode rather than opting in the whole codebase at once. Annotation mode lets you opt in components one at a time using the 'use memo' directive, so you find the components that break under automatic memoization before deploying them — not after.

---

Whether to enable it

New project: it's already on. Leave it.

Existing project on Next.js v15+: yes, but start with annotation mode:

// next.config.js
const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
}

Add 'use memo' to individual components, watch their behavior, work through the codebase. Once nothing is breaking, switch to full mode.

Existing project below v15: upgrade first. The compiler integration lives in the framework layer — bolt-on approaches for older Next.js versions aren't worth the maintenance cost.

---

The one exception

If your codebase has components that rely on referential instability — functions or objects being recreated on every render to trigger a downstream effect — the compiler will silently break them by memoizing what you meant to be unstable.

This is rare, and almost always a latent bug rather than intentional design. I've found it once in a codebase that had been accumulating state-management code for four years: a custom event emitter that depended on a new function reference each render to re-subscribe. Annotation mode caught it. A full opt-in would have shipped it.

---

Summary

Question	Answer
Is it stable?	Yes, since late 2025
Is it production-ready?	Yes, default in new Next.js projects
Is it widely adopted?	Universal for new projects, incremental for existing
Should I enable it?	Yes — annotation mode first for large codebases
Do I still need useCallback?	Rarely

---

Four years of accumulated code, one function reference bug, caught before production. That's what annotation mode is for.

If you want the broader picture — what the compiler changes about how to learn React and Next.js in 2026, which resources are worth the time — the 2026 Next.js engineer's roadmap covers that.

For the performance side: once re-renders are handled, the real bottlenecks shift to LCP, CLS, and data-fetching architecture. The Core Web Vitals case study walks through a real Next.js App Router codebase with specific measurements.