React Compiler vs useMemo: entenda as diferenças na otimização de performance

O que é o useMemo e por que utilizá-lo?

• Cálculos computacionalmente intensivos (por exemplo, processamento matemático pesado ou loops gigantes).

• Formatação ou transformação de grandes volumes de dados.

• Operações de filtragem, ordenação ou mapeamento em arrays extensos que não mudam com frequência.

• Prevenção de recriação de objetos ou arrays complexos que são passados como props para componentes filhos otimizados com React.memo ou PureComponent.

Exemplo de código: useMemo em ação

function calcularNota(aluno) {
  // Simulação com loop intensivo para simular processamento
  console.log(`Calculando nota para ${aluno.nome}...`);
  let notaFinal = 0;
  for (let i = 0; i < 100000000; i++) { 
    notaFinal += Math.random() * aluno.id;
  }
  return { ...aluno, nota: (notaFinal % 100).toFixed(2) };
}

function RankingAlunos({ alunos, turma }) {
  console.log(`Renderizando RankingAlunos da turma ${turma}`);

  // Sem memoização, 'rankingComNotas' é recalculado a cada renderização de RankingAlunos,
  // mesmo que a lista de 'alunos' não tenha mudado.
  const rankingComNotas = alunos.map(aluno => calcularNota(aluno));

  return (
    <div>
      <h2>Ranking da Turma: {turma}</h2>
      <ul>
        {rankingComNotas.map(aluno => (
          <li key={aluno.id}>{aluno.nome} - Nota: {aluno.nota}</li>
        ))}
      </ul>
    </div>
  );
}

// Exemplo de uso:
const alunosDaRocketseat = [
  { id: 1, nome: 'Diego' },
  { id: 2, nome: 'Mayk' },
  { id: 3, nome: 'Fernanda' }
];
<RankingAlunos alunos={alunosDaRocketseat} turma="Pós-graduação IA e Automação 2025" />;

import React, { useMemo } from 'react';

function calcularNota(aluno) {
  // Simulação com loop intensivo para simular processamento
  console.log(`Calculando nota para ${aluno.nome}...`);
  let notaFinal = 0;
  for (let i = 0; i < 100000000; i++) { 
    notaFinal += Math.random() * aluno.id;
  }
  return { ...aluno, nota: (notaFinal % 100).toFixed(2) };
}

function RankingAlunosOtimizado({ alunos, turma }) {
  console.log(`Renderizando RankingAlunosOtimizado da turma ${turma}`);

  // Com useMemo, 'rankingComNotas' só será recalculado se a prop 'alunos' mudar.
  // Se 'turma' mudar, mas 'alunos' não, o valor memoizado de 'rankingComNotas' será reutilizado.
  const rankingComNotas = useMemo(() => {
    console.log("Executando useMemo para recalcular o ranking...");
    return alunos.map(aluno => calcularNota(aluno));
  }, [alunos]); // Dependências: só recalcula se 'alunos' mudar.

  return (
    <div>
      <h2>Ranking da Turma (Otimizado): {turma}</h2>
      <ul>
        {rankingComNotas.map(aluno => (
          <li key={aluno.id}>{aluno.nome} - Nota: {aluno.nota}</li>
        ))}
      </ul>
    </div>
  );
}

// Exemplo de uso:
const alunosDaRocketseat = [
  { id: 1, nome: 'Diego' },
  { id: 2, nome: 'Mayk' },
  { id: 3, nome: 'Fernanda' }
];
<RankingAlunosOtimizado alunos={alunosDaRocketseat} turma="Pós-graduação IA e Automação 2025" />;

Desafios da memoização manual com useMemo

• Código verboso: Cada uso de useMemo adiciona um certo boilerplate ao código. A função que executa o cálculo precisa ser envolvida pelo hook, e é crucial fornecer corretamente o array de dependências. Em componentes com muitos cálculos a otimizar, isso pode tornar o código mais longo e visualmente "poluído".

// Exemplo hipotético de componente com múltiplos useMemo
function PainelDeControle({ dadosBrutos, filtrosAtivos, configUsuario }) {
  const dadosProcessados = useMemo(() => {
    // lógica complexa com dadosBrutos
    return processar(dadosBrutos);
  }, [dadosBrutos]);

  const dadosFiltrados = useMemo(() => {
    // lógica de filtragem usando dadosProcessados e filtrosAtivos
    return filtrar(dadosProcessados, filtrosAtivos);
  }, [dadosProcessados, filtrosAtivos]);

  const layoutPersonalizado = useMemo(() => {
    // lógica para gerar layout com base em configUsuario
    return gerarLayout(configUsuario);
  }, [configUsuario]);

  // ... restante do componente
}

Imagine esse padrão se repetindo várias vezes. A intenção de otimizar é nobre, mas a legibilidade pode ser comprometida com tanto código adicional para controlar desempenho.

• Risco de esquecer dependências ou usá-las de forma incorreta: Este talvez seja o maior ponto de dor. O array de dependências do useMemo diz ao React: "só refaça este cálculo se algum destes valores mudar". Se você esquecer de incluir uma dependência crucial, o useMemo pode retornar um valor desatualizado (stale), levando a bugs difíceis de rastrear. Por outro lado, incluir dependências desnecessárias pode fazer com que o useMemo recalcule com mais frequência do que o ideal, anulando o benefício da otimização. É preciso ter um conhecimento sólido das "Rules of React" (regras dos hooks) e bastante atenção ao definir dependências.

// Exemplo de erro comum: esquecer uma dependência no useMemo
function DetalhesUsuario({ usuarioId, permissoes }) {
  const temAcessoEspecial = useMemo(() => {
    // ERRO: 'permissoes' não está no array de dependências!
    // Se 'permissoes' mudar, 'temAcessoEspecial' não será recalculado corretamente.
    return verificarAcesso(usuarioId, permissoes);
  }, [usuarioId]); // Deveria ser [usuarioId, permissoes]
}

• Manutenção e legibilidade: À medida que um componente cresce e acumula vários useMemo e useCallback, a leitura e manutenção do código podem se tornar um desafio. O desenvolvedor precisa constantemente raciocinar sobre o que está memoizado, por que está memoizado e quais são as dependências corretas de cada memoização. Isso adiciona uma carga cognitiva que desvia o foco da lógica de negócio principal do componente.

• Otimização prematura ou desnecessária: Nem toda computação pesada precisa ser envolvida por um useMemo. Às vezes, o custo de usar o hook (a própria comparação de dependências que o React faz a cada render) pode ser maior do que o benefício de memoizar um cálculo simples. Identificar corretamente quando usar useMemo é uma arte que se adquire com experiência – e é fácil cair na tentação de usar memoização em excesso sem necessidade real.

Apresentando o React Compiler: o novo automatizador de otimizações

Atualmente, o React Compiler está em fase experimental avançada (é considerado Release Candidate – RC) e já está sendo usado em produção em algumas partes do Instagram, com resultados promissores. Ele foi projetado para ser compatível com código React existente (React 17+), desde que o código siga as "Rules of React" direitinho.

• Menos código boilerplate: Diga adeus à maioria dos useMemo e useCallback manuais espalhados pelo código.

• Redução de erros: Menor chance de esquecer dependências ou cometer aqueles erros sutis de memoização que vimos acima.

• Código mais limpo e legível: Seus componentes ficam focados na lógica de negócio e UI, sem tanta distração com detalhes de performance.

• Performance por padrão: Otimizações importantes deixam de ser um esforço manual e propenso a esquecimentos – o React já entrega boa parte delas por padrão via compilador.

O React Compiler não é uma bala de prata que elimina a necessidade de entender sobre desempenho. Ele é uma ferramenta poderosa que automatiza uma classe significativa de otimizações comuns, liberando tempo e esforço do desenvolvedor, mas não substitui a compreensão dos fundamentos de performance no React.

Como o React Compiler funciona (resumo técnico acessível)

• Análise em tempo de compilação (build time): Diferente dos hooks como useMemo que atuam em tempo de execução (runtime, no navegador), o React Compiler atua durante a compilação do código. Quando você compila seu projeto React (por exemplo, usando Webpack/Babel ou outro bundler moderno), o React Compiler – configurado como um plugin do Babel (o babel-plugin-react-compiler) – analisa o código-fonte dos seus componentes e hooks durante o build.

• Modelagem semântica do código React: O compilador não olha apenas a sintaxe do JavaScript; ele entende a semântica do React. Ele reconhece o que são componentes, props, estado, hooks e, crucialmente, entende o fluxo de dados e as dependências dentro dos componentes, sempre respeitando as "Rules of React".

• Inferência automática de dependências e memoização: Com base nessa análise profunda, o compilador identifica quais valores e funções dentro de um componente estão sendo recomputados ou recriados desnecessariamente a cada renderização. Ele então envolve automaticamente essas partes do código com o equivalente a um useMemo ou useCallback, inferindo as dependências corretas. Em outras palavras, é como se ele escrevesse os hooks de otimização por você, de forma muito mais precisa e abrangente do que um humano conseguiria fazer consistentemente em uma grande codebase.

• Segurança em primeiro lugar: Uma preocupação natural é: "E se o compilador otimizar algo que não deveria e quebrar minha aplicação?". A equipe do React levou isso muito a sério. O React Compiler foi projetado para ser conservador em suas transformações. Se ele encontrar um padrão de código que viole as "Rules of React" ou que seja complexo demais para analisar com segurança, ele simplesmente não otimizará aquela parte específica do código. Nesses casos, ele loga um aviso (caso você tenha configurado o plugin ESLint eslint-plugin-react-compiler, altamente recomendado para feedback durante o desenvolvimento) e deixa o código como está. Isso garante que a aplicação continue funcionando corretamente, mesmo que algumas partes não recebam a otimização automática.

• Sem necessidade de reescrever código (na maioria dos casos): A beleza do React Compiler é que, para a maioria dos códigos React idiomáticos que já seguem boas práticas, você não precisa fazer grandes alterações no código. Basta configurar o compilador no seu processo de build. Ele vai "ler" seu código React normal e otimizá-lo automaticamente. Ou seja, não é necessário adotar uma sintaxe diferente ou APIs novas — seu código de sempre será transformado em uma versão mais performática durante o build.

Comparativo na prática: React Compiler vs useMemo (exemplo lado a lado)

const todosOsInscritos = [
  { id: 1, nome: 'Diego', curso: 'Formação React' },
  { id: 2, nome: 'Mayk', curso: 'Formação Full-Stack' },
  { id: 3, nome: 'Fernanda', curso: 'Formação IA para Devs' },
  { id: 4, nome: 'Rodrigo', curso: 'Formação React Native' },
  { id: 5, nome: 'Laís', curso: 'Formação React' },
  { id: 6, nome: 'Isabela', curso: 'Formação Python' },
  // ... imagine que haja milhares de outros alunos
];

import React, { useState, useMemo } from 'react';

// (Suponha que 'todosOsInscritos' está definido como acima)

function ListaInscritosManual({ inscritos }) {
  const [filtro, setFiltro] = useState('');
  const [outroEstado, setOutroEstado] = useState(0); // estado apenas para forçar re-renders

  // Filtramos os inscritos usando useMemo.
  // Esta operação pesada só será refeita se 'inscritos' ou 'filtro' mudarem.
  const inscritosFiltrados = useMemo(() => {
    console.log('Filtrando manualmente com useMemo...');
    if (!filtro) {
      return inscritos;
    }
    return inscritos.filter(aluno =>
      aluno.nome.toLowerCase().includes(filtro.toLowerCase()) ||
      aluno.curso.toLowerCase().includes(filtro.toLowerCase())
    );
  }, [inscritos, filtro]); // Dependências explícitas

  return (
    <div>
      <input
        type="text"
        placeholder="Buscar por nome ou curso..."
        value={filtro}
        onChange={(e) => setFiltro(e.target.value)}
      />
      <button onClick={() => setOutroEstado(c => c + 1)}>
        Forçar Re-render ({outroEstado})
      </button>
      <ul>
        {inscritosFiltrados.length > 0 ? (
          inscritosFiltrados.map(aluno => (
            <li key={aluno.id}>
              {aluno.nome} – ({aluno.curso})
            </li>
          ))
        ) : (
          <p>Nenhum aluno encontrado com o filtro "{filtro}".</p>
        )}
      </ul>
    </div>
  );
}

// Para utilizar:
// <ListaInscritosManual inscritos={todosOsInscritos} />

import React, { useState } from 'react';

// (Suponha que 'todosOsInscritos' está definido como no exemplo anterior)
// (E que o React Compiler já está configurado no build do projeto)

function ListaInscritosComCompiler({ inscritos }) {
  const [filtro, setFiltro] = useState('');
  const [outroEstado, setOutroEstado] = useState(0);

  // Escrevemos a lógica de filtragem diretamente, de forma clara:
  console.log('Lógica de filtragem (React Compiler irá otimizar)...');
  let inscritosFiltrados;
  if (!filtro) {
    inscritosFiltrados = inscritos;
  } else {
    inscritosFiltrados = inscritos.filter(aluno =>
      aluno.nome.toLowerCase().includes(filtro.toLowerCase()) ||
      aluno.curso.toLowerCase().includes(filtro.toLowerCase())
    );
  }
  // Observação: na prática, o código gerado pelo compilador aqui teria o equivalente a um useMemo envolvendo 'inscritosFiltrados'.

  return (
    <div>
      <input
        type="text"
        placeholder="Buscar por nome ou curso..."
        value={filtro}
        onChange={(e) => setFiltro(e.target.value)}
      />
      <button onClick={() => setOutroEstado(c => c + 1)}>
        Forçar Re-render ({outroEstado})
      </button>
      <ul>
        {inscritosFiltrados.length > 0 ? (
          inscritosFiltrados.map(aluno => (
            <li key={aluno.id}>
              {aluno.nome} – ({aluno.curso})
            </li>
          ))
        ) : (
          <p>Nenhum aluno encontrado com o filtro "{filtro}".</p>
        )}
      </ul>
    </div>
  );
}

// Para utilizar:
// <ListaInscritosComCompiler inscritos={todosOsInscritos} />

Tabela Comparativa: useMemo (Manual) vs React Compiler (Automático)

Benefícios e impacto para o desenvolvedor

• Código mais limpo e conciso: O benefício mais imediato é a redução drástica da quantidade de useMemo e useCallback no código. Os componentes ficam mais curtos, fáceis de ler e focados na lógica de negócio e UI, em vez de estarem cheios de otimizações manuais espalhadas.

• Menos preocupação com detalhes de performance: Embora entender os princípios de desempenho continue sendo importante, o React Compiler alivia o fardo de ter que microgerenciar a memoização em cada pequeno cálculo ou função. Você pode confiar que o compilador está aplicando otimizações sensatas por padrão, te deixando livre para focar em outras preocupações.

• Redução de bugs relacionados a dependências de hooks: Erros no array de dependências do useMemo/useCallback são uma fonte comum de bugs sutis e difíceis de depurar em React. Como o compilador infere dependências automaticamente de forma robusta, ele minimiza essa classe de problemas.

• Mais tempo para focar em criar features: Ao automatizar uma tarefa repetitiva e propensa a erros, o React Compiler libera tempo e energia mental para que os desenvolvedores possam se concentrar no que realmente agrega valor ao produto: construir novas funcionalidades, melhorar a experiência do usuário e resolver problemas de negócio.

• Melhor experiência para iniciantes: Para quem está começando no React, entender hooks de desempenho como useMemo, useCallback e mecanismos como React.memo pode ser uma barreira inicial. Com o compilador, o React se torna um pouco mais "amigável" nesse aspecto, permitindo que novos desenvolvedores escrevam código performático sem precisar dominar todos esses conceitos avançados logo de cara.

• Consistência nas otimizações em equipes grandes: Em projetos com muitos desenvolvedores, garantir que as otimizações de memoização sejam aplicadas de forma consistente e correta por todos é um desafio. O React Compiler promove essa consistência de forma automática, padronizando as otimizações em toda a base de código.

Mas o useMemo vai "morrer"? Ainda preciso aprendê-lo?

• Transição gradual: O React Compiler ainda está ganhando espaço e se tornando mainstream. Muitas bases de código existentes utilizam useMemo extensivamente, e você precisará entendê-lo para dar manutenção nessas aplicações legadas.

• Casos complexos ou específicos: Podem existir cenários muito complexos, ou otimizações manuais muito específicas, em que o compilador pode optar por não intervir (por questões de segurança) ou em que um desenvolvedor experiente queira um controle mais granular. A expectativa é que esses casos sejam raros, mas podem ocorrer.

• Entendimento fundamental: Conhecer o funcionamento do useMemo ajuda a compreender o que o React Compiler está fazendo por baixo dos panos. Entender os princípios de memoização e como o React lida com renderizações continua sendo crucial para ser um desenvolvedor React eficaz — com ou sem compilador.

• Bibliotecas e código de terceiros: Você ainda vai se deparar com useMemo em muitas bibliotecas, posts e exemplos de código por um bom tempo. Ou seja, é um conhecimento que permanece útil e requisitado.

Conclusão

E aí, qual vai ser seu primeiro projeto aplicando esses conhecimentos ou explorando o React Compiler? Conta pra gente na comunidade – adoraríamos saber como essa novidade vai impactar seus próximos desenvolvimentos!