Capítulo 235 de 456

reactCompiler

Core Idea

Habilita o React Compiler, que otimiza automaticamente a renderização de componentes reduzindo a necessidade de useMemo/useCallback manuais. O Next.js aplica uma otimização SWC customizada que só roda o compilador (via plugin Babel) nos arquivos relevantes (com JSX/hooks), em vez de todos, mantendo builds mais rápidos que usar o plugin Babel puro.

Key Concepts

  • reactCompiler (config): true habilita o compilador globalmente.
  • compilationMode: 'annotation': modo opt-in; só componentes/hooks anotados com a diretiva "use memo" são compilados.
  • "use no memo": diretiva inversa, opt-out de um componente/hook específico.
  • Requer instalar babel-plugin-react-compiler como devDependency.

Code Examples

import type { NextConfig } from 'next'
const nextConfig: NextConfig = { reactCompiler: true }
export default nextConfig

const nextConfig: NextConfig = {
  reactCompiler: { compilationMode: 'annotation' },
}

export default function Page() {
  'use memo'
  // ...
}
  • O que demonstra: habilitação global vs. modo opt-in por componente com "use memo".

Key Takeaways

  1. Builds podem ficar levemente mais lentos que o compilador Rust padrão, mas o impacto é pequeno e localizado graças à otimização SWC do Next.js.
  2. Roda via plugin Babel; instale babel-plugin-react-compiler antes de habilitar.

Connects To

  • useMemo / useCallback (React): o compilador reduz a necessidade de memoização manual.
AnteriorproxyClientMaxBodySizePróximoreactMaxHeadersLength