React Compiler in 2026: Forget useMemo and useCallback Forever

// Before (2024) — manual memoization prone to bugs
function ProductList({ products, filter, onSelect }) {
  const filtered = useMemo(() => 
    products.filter(p => p.category === filter), [products, filter]
  )
  const handleSelect = useCallback((id) => onSelect(id), [onSelect])
  
  // If you forget [filter], silent bug. If you add extra deps, unnecessary re-render.
  return filtered.map(p => (
    <ProductCard key={p.id} product={p} onSelect={handleSelect} />
  ))
}

// After (2026) — React Compiler does everything automatically
function ProductList({ products, filter, onSelect }) {
  // 0 manual hooks. Compiler memoizes filtered and handleSelect automatically.
  const filtered = products.filter(p => p.category === filter)
  return filtered.map(p => (
    <ProductCard key={p.id} product={p} onSelect={onSelect} />
  ))
}
// Build output: compiler generates the equivalent useMemo, perfect and without omissions.

// ✅ Compilable — pure, no mutation
function Total({ items }) {
  let sum = 0
  for (const item of items) sum += item.price
  return <span>{sum}</span>
}

// ❌ Not compilable — prop mutation (compiler will warn)
function Bad({ user }) {
  user.name = 'hack' // ← eslint: mutation of prop not allowed
  return <span>{user.name}</span>
}

// ✅ Fix — clone before mutating
function Good({ user }) {
  const displayName = user.name.toUpperCase() // without mutating prop
  return <span>{displayName}</span>
}

// Next.js 16 — next.config.js (2026)
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: true, // ← enable compiler
  },
}
export default nextConfig

// Vite 7 — vite.config.ts (2026)
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

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

// Verify it compiles: look for "React Compiler" in build log
// ✓ Compiled with React Compiler in 1.2s — 87/90 components optimized

// eslint.config.js — 2026
import reactCompiler from 'eslint-plugin-react-compiler'

export default [
  {
    plugins: { 'react-compiler': reactCompiler },
    rules: {
      'react-compiler/react-compiler': 'error'
    }
  }
]

// Errors it will show:
// - "This value was mutated after creation — move mutation before JSX"
// - "Cannot compile: use of `let` reassigned conditionally, extract to function"
// - "Skipping component: too dynamic to optimize (consider memo manually)"

// Human memoizes "just in case" — adds overhead
function Card({ title, count }) {
  const upper = useMemo(() => title.toUpperCase(), [title])
  const doubled = useMemo(() => count * 2, [count])
  return <div>{upper}: {doubled}</div>
  // Cost: 2 useMemo = 2 comparisons + 2 closures per render
}

// Compiler decides: title.toUpperCase() is cheap, don't memoize. count*2 neither.
// Only memoizes if calculation is > ~1ms or avoids re-render in memoized child.
// Result: less code, faster than the "optimized" manual version.

// Official escape hatch 2026 — disable per component
function LegacyChart({ data }) {
  'use no memo' // ← directive: do not compile this component
  const chart = useMemo(() => heavyCompute(data), [data])
  return <canvas ref={el => draw(el, chart)} />
}

// Or per entire file if it's legacy library
// On first line of file:
// 'use no memo'

# 1. Upgrade to React 19.2+
npm install react@^19.2 react-dom@^19.2

# 2. Install compiler + eslint
npm install -D babel-plugin-react-compiler eslint-plugin-react-compiler

# 3. Enable in Next or Vite (see section 2)

# 4. Run linter — it lists the 5-10% not compilable
npx eslint . --ext .ts,.tsx

# 5. Fix mutations and reassigned `let`

# 6. Build and verify — look for "React Compiler" in output
npm run build

# 7. Delete useMemo/useCallback where compiler already optimizes (optional, progressive)
npx react-compiler-healthcheck # Meta script suggesting what to delete