React Compiler: Otimização automática e o fim do useMemo

Todo dev React chegou num ponto onde começou a jogar useMemo e useCallback em tudo — não porque entendia, mas porque o componente estava lento e parecia a coisa certa a fazer. O React Compiler 1.0 chegou pra acabar com isso.

Você reconhece esse código:

const precoComDesconto = useMemo(() => {
  return produto.preco * (1 - desconto);
}, [produto.preco, desconto]);

const handleClick = useCallback(() => {
  adicionarAoCarrinho(produto.id);
}, [produto.id]);

const ProdutoCard = React.memo(({ produto, onAdd }) => {
  // ...
});

Funciona. Mais ou menos. Mas você provavelmente não tem certeza de quais dessas memoizações realmente fazem diferença — e quais estão ali por superstição coletiva. E se a lista de dependências estiver errada? E se você esqueceu uma? E se o componente filho não usa React.memo e todo esse trabalho foi inútil?

Esse é o problema que o React Compiler 1.0 resolve. Não parcialmente — ele assume esse trabalho inteiro por você.

O que é o React Compiler, de verdade

É uma ferramenta que roda em tempo de build — não em runtime. Antes do seu código chegar no navegador, o compilador o analisa, entende o fluxo de dados de cada componente, e insere memoização nos lugares certos automaticamente.

Pensa assim: você escreve o código como sempre escreveu. Limpo, direto, sem se preocupar com otimização. O compilador lê tudo, entende o que muda e o que não muda, e transforma o código antes de fazer o build.

A diferença pra o que você fazia manualmente? O compilador consegue memoizar em caminhos condicionais — coisas que o useMemo humano simplesmente não alcança. Se um componente tem um early return antes de um cálculo pesado, ele sabe que não precisa memorizar aquele caminho. Você não conseguia expressar isso com hooks.

Lançado em outubro de 2025 no React Conf, o React Compiler 1.0 chegou estável depois de meses de beta. Foi testado em produção nas principais apps da Meta antes de virar público — e agora tem suporte estável no Next.js 16, Vite e Expo.

O antes e o depois na prática

O mesmo componente de produto, com e sem o compilador:

Antes — manual e verboso:

function ProdutoCard({ produto, desconto }) {
  const preco = useMemo(
    () => produto.preco * (1 - desconto),
    [produto.preco, desconto]
  );

  const handleAdd = useCallback(() => {
    adicionarCarrinho(produto.id);
  }, [produto.id]);

  return (
    <div>
      <p>{preco}</p>
      <button onClick={handleAdd}>Adicionar</button>
    </div>
  );
}

Depois — limpo, mesmo resultado:

function ProdutoCard({ produto, desconto }) {
  const preco = produto.preco * (1 - desconto);

  function handleAdd() {
    adicionarCarrinho(produto.id);
  }

  return (
    <div>
      <p>{preco}</p>
      <button onClick={handleAdd}>Adicionar</button>
    </div>
  );
}

O segundo componente parece React básico de 2018. Mas em produção, com o compilador ativo, ele tem as mesmas garantias de performance do primeiro — ou melhores. O compilador faz o trabalho invisível.

Os números que importam

A Meta não lançou o compilador baseada em teoria. Usou em produção primeiro.

• 12% mais rápido no carregamento inicial — Meta Quest Store
• 2.5× mais rápido nas interações após adoção
• 20–30% de redução no tempo de render — Sanity Studio (1.231 de 1.411 componentes compilados)

Não é benchmark artificial — é produto real, em produção, com usuários reais.

Como ativar

Se você usa Next.js 16, já tem suporte estável. É só habilitar:

// next.config.ts
const nextConfig = {
  reactCompiler: true,
};

export default nextConfig;

No Vite, via Babel plugin:

// vite.config.ts
import react from "@vitejs/plugin-react";

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

Funciona a partir do React 17 — você não precisa estar no React 19 pra começar a usar.

useMemo e useCallback ainda existem — mas com outro papel

Aqui vem o detalhe que a maioria dos artigos passa rápido: você não deleta todos os useMemo do projeto.

O compilador assume o trabalho de memoização automática de forma geral. Mas existe um caso específico onde você ainda controla na mão: quando um valor é dependência de useEffect e você precisa garantir estabilidade de referência.

// Esse useMemo ainda faz sentido
const config = useMemo(() => ({
  timeout: props.timeout,
  retries: props.retries,
}), [props.timeout, props.retries]);

useEffect(() => {
  iniciarConexao(config);
}, [config]); // config precisa ser estável

Fora desses casos, o compilador cuida. A regra prática: escreva React limpo, sem se preocupar com memoização. Só adicione useMemo ou useCallback quando o useEffect precisar de uma dependência estável.

Um aviso real: o compilador assume que você segue as regras do React — sem mutação de estado direta, sem efeitos colaterais fora do lugar. Se o seu código quebra essas regras, o compilador vai otimizar baseado na premissa de que você não está quebrando — e os bugs ficam mais difíceis de rastrear. Antes de ativar, rode o eslint-plugin-react-hooks com o preset do compilador.

Adoção incremental — não é big bang

O React Compiler não é uma migração. Você não precisa reescrever nada.

A recomendação da equipe do React é simples: ative o compilador, rode seus testes end-to-end, e observe. Se algum componente tiver problema de compatibilidade, você pode desativá-lo individualmente com uma diretiva:

function ComponenteLegado() {
  "use no memo"; // esse componente fica de fora do compilador
  // ...
}

O que muda no seu dia a dia

• Escreva React limpo — sem useMemo preventivo, sem useCallback por precaução.
• O compilador otimiza em build time — memoização automática, mais precisa que a manual.
• useMemo ainda tem lugar — só quando o useEffect precisar de dependência estável.
• Adoção incremental — ative, teste, ajuste. Não é reescrita.
• Suporte no Next.js 16 e Vite — uma linha de configuração pra começar.
• Funciona a partir do React 17 — sem necessidade de migrar pra React 19 antes.

Referências

• React Compiler 1.0 — react.dev (outubro 2025)
• Meta's React Compiler 1.0 Brings Automatic Memoization to Production — InfoQ (dezembro 2025)
• State of React 2025 — Conclusion