React Compiler: menos memoização manual e mais performance

O que é o React Compiler?

O React Compiler é uma ferramenta que analisa o código da aplicação durante a compilação e aplica otimizações automaticamente para evitar renderizações desnecessárias.

Antes, era comum utilizar recursos como:

• useMemo
• useCallback
• memo

Para evitar que componentes e funções fossem recriados em toda renderização.

Com o React Compiler, muitas dessas otimizações passam a ser feitas automaticamente.

O problema das renderizações desnecessárias

Imagine o componente abaixo:

function ProductList({ products }) {
  const totalProducts = products.length;

  return (
    <>
      <h2>{totalProducts} produtos</h2>
      <ProductItems products={products} />
    </>
  );
}

Sempre que o componente pai renderiza, o React executa novamente toda a árvore de componentes.

Em aplicações maiores, isso pode gerar processamento desnecessário.

Como fazíamos antes

Era comum utilizar memo:

const ProductItems = memo(function ProductItems({ products }) {
  return (
    <>
      {products.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </>
  );
});

E utilizar useCallback:

const handleDelete = useCallback((id) => {
  removeProduct(id);
}, []);

Ou até useMemo:

const filteredProducts = useMemo(() => {
  return products.filter(product => product.active);
}, [products]);

Apesar de funcionarem, essas otimizações adicionam complexidade ao código.

Como o React Compiler ajuda

Com o React Compiler habilitado, o próprio React consegue identificar:

• Valores que não mudaram;
• Funções estáveis;
• Componentes que podem ser reutilizados;
• Renderizações desnecessárias.

Isso significa menos código e menos preocupação com otimizações manuais.

Exemplo

Sem o Compiler:

const Button = memo(function Button({ onClick }) {
  return (
    <button onClick={onClick}>
      Salvar
    </button>
  );
});

const handleSave = useCallback(() => {
  console.log("Salvando");
}, []);

Com o React Compiler:

function Button({ onClick }) {
  return (
    <button onClick={onClick}>
      Salvar
    </button>
  );
}

function App() {
  function handleSave() {
    console.log("Salvando");
  }

  return <Button onClick={handleSave} />;
}

O compilador faz as otimizações automaticamente.

Diretiva "use memo"

Em alguns casos é possível orientar o compilador utilizando:

"use memo";

Exemplo:

function ProductList({ products }) {
  "use memo";

  return (
    <>
      {products.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </>
  );
}

Isso permite que o React aplique otimizações específicas naquele componente.

Principais benefícios

Código mais limpo

Menos necessidade de:

• useMemo;
• useCallback;
• memo.

Menos bugs

Dependências incorretas em hooks são uma fonte comum de problemas.

Com menos hooks, o código fica mais simples.

Melhor experiência para desenvolvedores

A equipe pode focar na lógica da aplicação e deixar otimizações para o compilador.

Melhor manutenção

Componentes menores e menos verbosos são mais fáceis de evoluir.

O React Compiler substitui tudo?

Não.

Ainda existem casos em que recursos como:

• useMemo;
• useCallback;
• memo;

continuam sendo úteis.

Principalmente em:

• Bibliotecas;
• Aplicações muito complexas;
• Casos específicos de performance.

Mas para a maioria das aplicações, o número de otimizações manuais tende a diminuir bastante.

Como habilitar?

Atualmente o React Compiler ainda está em evolução e pode ser utilizado através do Babel e das configurações do ecossistema React.

Frameworks como Next.js deverão incorporar esse suporte de forma cada vez mais transparente.

Quando utilizar?

O React Compiler é especialmente interessante em:

• Aplicações React 19;
• Projetos novos;
• Sistemas com muitos componentes;
• Times que desejam reduzir complexidade;
• Aplicações que utilizam excesso de useMemo e useCallback.

Vantagens

• Menos boilerplate;
• Código mais simples;
• Otimizações automáticas;
• Melhor legibilidade;
• Menor chance de erros;
• Melhor experiência de desenvolvimento.

Conclusão

O React Compiler representa uma mudança importante na forma como pensamos performance no React. Em vez de otimizar manualmente cada componente, podemos permitir que o compilador faça grande parte desse trabalho automaticamente.

Isso torna o código mais limpo, mais fácil de manter e permite que os desenvolvedores foquem na regra de negócio, deixando as otimizações para o próprio React.

Saiba mais

• React Compiler Documentation

https://react.dev/learn/react-compiler

• React 19

https://react.dev/blog

• React Team

https://react.dev