Diagnosticar e corrigir re-renders lentos em React

Prompt

Atua como especialista em desempenho de React que diagnostica antes de otimizar.

Contexto:
- Código envolvido: {{codigo}}
- Sintoma observado: {{sintoma}}
- Dados de medição (se existirem): {{medicoes}}
- Versão do React: {{versao_react}}

Se o código não chegar para perceber de onde vêm as props ou o estado, pede-me os componentes pai ou o contexto antes de propores alterações.

Entregáveis:
1. Hipóteses ordenadas por probabilidade para os re-renders ou o trabalho em excesso (estado demasiado acima, valor de contexto que muda em cada render, objetos ou funções novos em cada render, listas longas sem virtualização, cálculos caros no render, keys instáveis).
2. Como confirmar cada hipótese com o Profiler das React DevTools (o que gravar, o que observar no flamegraph e em «porque foi renderizado») e, se útil, com o painel Performance do navegador.
3. As correções, da mais simples à mais complexa: descer o estado, passar conteúdo como children, dividir o contexto, useMemo/useCallback/memo só onde a medição o justifique, useDeferredValue ou useTransition para campos de texto, virtualização de listas.
4. Código antes e depois de cada alteração aplicada, com o efeito esperado.
5. Como verificar a melhoria com a mesma medição e que limiar considerar suficiente.
6. O que não fazer: envolver tudo em memo, otimizar sem medir ou sacrificar a legibilidade por ganhos mínimos.

Restrições:
- Não inventes tempos nem ganhos percentuais; se não tiver medições, explica como obtê-las e deixa [PREENCHER].
- Se a versão usar o React Compiler, tem em conta que já memoriza automaticamente e ajusta as recomendações.
- Mantém o comportamento funcional idêntico.

Formato: diagnóstico, plano de medição, alterações com blocos de código e uma lista de verificação final.

Como utilizar

Exemplo de utilização

Exemplo de resultado

import { memo, useDeferredValue, useMemo, useState } from 'react';

export function TabelaEncomendas({ encomendas }: { encomendas: Encomenda[] }) {
  const [filtro, setFiltro] = useState('');
  const filtroDiferido = useDeferredValue(filtro);
  const visiveis = useMemo(
    () => encomendas.filter((e) => e.cliente.toLowerCase().includes(filtroDiferido.toLowerCase())), // [PREENCHER: campo real]
    [encomendas, filtroDiferido],
  );
  return (
    <>
      <input value={filtro} onChange={(ev) => setFiltro(ev.target.value)} aria-label="Filtrar encomendas" />
      <Linhas encomendas={visiveis} />
    </>
  );
}

const Linhas = memo(function Linhas({ encomendas }: { encomendas: Encomenda[] }) {
  return <table><tbody>{encomendas.map((e) => <LinhaEncomenda key={e.id} encomenda={e} />)}</tbody></table>;
});

Dados-chave

Categoria

Programação e desenvolvimento · React

Tipo de resultado

Código

Nível

Avançado

Pensado para

ChatGPT, Claude, Gemini e Microsoft Copilot

Verificado em

Pendente de verificação editorial

Variáveis

Código envolvido, Sintoma, Dados de medição e Versão do React

Idioma

Português

Preço

Gratuito, sem registo

Atualizado

07/11/2026

Perguntas frequentes