React Compiler en 2026: Olvida useMemo y useCallback para Siempre

// Antes (2024) — memoización manual propensa a bugs
function ProductList({ products, filter, onSelect }) {
  const filtered = useMemo(() => 
    products.filter(p => p.category === filter), [products, filter]
  )
  const handleSelect = useCallback((id) => onSelect(id), [onSelect])
  
  // Si olvidas [filter], bug silencioso. Si pones deps de más, re-render innecesario.
  return filtered.map(p => (
    <ProductCard key={p.id} product={p} onSelect={handleSelect} />
  ))
}

// Después (2026) — React Compiler hace todo automáticamente
function ProductList({ products, filter, onSelect }) {
  // 0 hooks manual. El compilador memoiza filtered y handleSelect automáticamente.
  const filtered = products.filter(p => p.category === filter)
  return filtered.map(p => (
    <ProductCard key={p.id} product={p} onSelect={onSelect} />
  ))
}
// Build output: el compilador genera el useMemo equivalente, perfecto y sin olvidos.

// ✅ Compilable — puro, sin mutación
function Total({ items }) {
  let sum = 0
  for (const item of items) sum += item.price
  return <span>{sum}</span>
}

// ❌ No compilable — mutación de prop (el compilador te avisará)
function Bad({ user }) {
  user.name = 'hack' // ← eslint: mutation of prop not allowed
  return <span>{user.name}</span>
}

// ✅ Solución — clonar antes de mutar
function Good({ user }) {
  const displayName = user.name.toUpperCase() // sin mutar prop
  return <span>{displayName}</span>
}

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

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: true, // ← activa compilador
  },
}
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', {}]]
      }
    })
  ]
})

// Verifica que compila: busca "React Compiler" en el 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'
    }
  }
]

// Errores que te mostrará:
// - "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)"

// Humano memoiza "por si acaso" — añade overhead
function Card({ title, count }) {
  const upper = useMemo(() => title.toUpperCase(), [title])
  const doubled = useMemo(() => count * 2, [count])
  return <div>{upper}: {doubled}</div>
  // Coste: 2 useMemo = 2 comparaciones + 2 closures por render
}

// Compiler decide: title.toUpperCase() es barato, no memoiza. count*2 tampoco.
// Solo memoiza si el cálculo es > ~1ms o evita re-render en hijo memoizado.
// Resultado: menos código, más rápido que la versión "optimizada" manual.

// Escape hatch oficial 2026 — desactiva por componente
function LegacyChart({ data }) {
  'use no memo' // ← directiva: no compilar este componente
  const chart = useMemo(() => heavyCompute(data), [data])
  return <canvas ref={el => draw(el, chart)} />
}

// O por archivo entero si es librería legacy
// En la primera línea del archivo:
// 'use no memo'

# 1. Actualiza a React 19.2+
npm install react@^19.2 react-dom@^19.2

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

# 3. Activa en Next o Vite (ver sección 2)

# 4. Ejecuta linter — te lista los 5-10% no compilables
npx eslint . --ext .ts,.tsx

# 5. Corrige mutaciones y `let` reasignados

# 6. Build y verifica — busca "React Compiler" en output
npm run build

# 7. Borra useMemo/useCallback donde el compilador ya optimiza (opcional, progresivo)
npx react-compiler-healthcheck # script de Meta que sugiere qué borrar