React Compiler v1.0: memoização automática em produção

Resposta atômica: React Compiler 1.0 saiu estável em 7 de outubro de 2025. Em apps reais (Meta Quest Store é o exemplo público), o ganho documentado é de até 12% em carregamento e cargas, com interações específicas mais de 2.5x mais rápidas. Funciona com React e React Native, integra com Next.js, Vite e Expo, e não exige reescrita de código.

O que muda em uma linha

useMemo e useCallback deixam de ser exigência mental do programador. O compilador analisa o código React, identifica oportunidades de memoização, e aplica automaticamente em build time.

Em outras palavras: aquela revisão de PR em que alguém pergunta "isso aqui não deveria estar memoizado?" deixa de existir. O compilador resolve.

Por que isso importa

Memoização manual é um dos antipadrões que mais aparece em revisão de código React. Times sêniores aplicam corretamente; times médios aplicam demais (overhead sem ganho) ou de menos (re-renderização desnecessária). Nenhum dos dois grupos consegue medir consistência.

O compilador faz isso de forma uniforme:

• nunca esquece de memoizar quando o ganho é real
• nunca memoiza quando o custo da memoização supera o ganho
• atualiza a estratégia conforme o código evolui

Em apps grandes, essa consistência é mais valiosa que o ganho médio.

O ganho medido

Os números públicos da release vêm de produção em apps Meta. Para o Meta Quest Store:

• carregamento inicial e navegações cross-page: até 12% mais rápido
• interações específicas: mais de 2.5x mais rápido

Esses números são absurdamente bons para uma mudança que não exige rewrite. A explicação: em apps grandes, a maior parte das interações lentas é re-renderização desnecessária. Memoizar corretamente em todos os componentes elimina o gargalo na origem.

Para o seu app, esperar 12% é otimista — depende de quão limpo está o código atual. Mas mesmo 4-6% em LCP/INP é o tipo de ganho que normalmente exige semanas de profiling manual.

Como adotar (incremental)

A abordagem recomendada é incremental por arquivo:

npm install -D babel-plugin-react-compiler eslint-plugin-react-compiler

Em babel.config.js (ou next.config / vite.config):

module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      compilationMode: "annotation",
    }],
  ],
};

Com compilationMode: "annotation", só são compilados arquivos que começam com "use memo" (comentário diretiva). Estratégia útil para validar gradualmente sem precisar ativar no app inteiro.

Depois que validar:

{
  compilationMode: "all",
}

E remove os comentários "use memo" — o compilador passa a otimizar tudo.

Pré-requisito: Rules of React

O compilador funciona em código que segue as Rules of React:

• componentes e hooks são funções puras
• props não são mutadas
• side effects ficam em useEffect
• hooks rodam em ordem consistente

Se o código tem mutação de prop, render condicional de hook, ou efeito colateral em corpo de componente — o compilador detecta e pula esse arquivo. O ESLint plugin marca esses casos como warning antes do build, então o time aprende a corrigir.

A consequência prática: adotar React Compiler virou também um lint de qualidade. Em projetos legados, o primeiro turno do compilador serve para revelar quais componentes violam regras.

Onde NÃO ajuda

Três cenários onde Compiler tem ganho marginal:

1. Apps com lógica de servidor pesada e UI simples. Se o gargalo é fetch ou hydration, memoização não muda muito.

2. Componentes que já estão otimizados manualmente. Se você fez profiling e aplicou useMemo/useCallback cirurgicamente, o ganho do compilador é zero. (Mas a consistência futura compensa — código novo entra otimizado por padrão.)

3. Bibliotecas com APIs que dependem de referência estável. Algumas libs antigas confiam em referências de função estáveis para detectar mudança. Com memoização automática, comportamento pode mudar. Valida com testes de integração antes.

A leitura para projetos brasileiros

Se você roda Next.js 15+ ou tem app React com performance como gargalo, três passos:

1. Ativar Compiler em modo annotation em uma rota crítica. Mensure CWV antes e depois.
2. Resolver violações de Rules of React que o ESLint plugin reportar.
3. Migrar para mode "all" após validar uma sprint.

Esse trabalho é candidato natural a ADR — decisão técnica documentada, com métricas before/after auditáveis.

Próximo passo

Para times que querem aplicar isso com disciplina (medição de CWV antes/depois, gate de regressão em CI, ADR formal): conversa rápida com líder técnico cobre o caminho.

Fontes citadas

1. React Compiler v1.0 — React Blog · acessado em 2026-05-19
2. React Compiler — Introduction · acessado em 2026-05-19
3. React Compiler — Incremental Adoption · acessado em 2026-05-19