Performance de Componentes React

Visão Geral

Identifique gargalos de renderização, isole atualizações custosas e aplique otimizações direcionadas sem alterar o comportamento da UI.

Quando Usar

• Quando o usuário pedir para analisar ou melhorar um componente React lento.
• Quando você precisar reduzir re-renderizações, lentidão em listas ou trabalho de renderização custoso em UIs React.

Fluxo de Trabalho

1. Reproduza ou descreva a lentidão.
2. Identifique o que dispara re-renderizações (atualizações de estado, mudanças em props, efeitos).
3. Isole o estado que muda rapidamente de subárvores pesadas.
4. Estabilize props e manipuladores; memorize onde vale a pena.
5. Reduza o trabalho custoso (cálculo, tamanho do DOM, tamanho da lista).
6. Valide: abra o Profiler do React DevTools → grave a interação → inspecione o Flamegraph em busca de componentes renderizando por mais de ~16 ms → compare com uma gravação de linha de base pré-otimização.

Checklist

• Meça: use o Profiler do React DevTools ou registre renderizações; capture a linha de base.
• Encontre mudanças: identifique estado atualizado em um timer, scroll, input ou animação.
• Divida: mova o estado de "tick" para um filho; mantenha listas pesadas estáticas.
• Memorize: envolva linhas de folha com memo apenas quando as props forem estáveis.
• Estabilize props: use useCallback/useMemo para manipuladores e valores derivados.
• Evite trabalho derivado na renderização: pré-calcule ou calcule dentro de helpers memorizados.
• Controle o tamanho da lista: use windowing/virtualização para listas longas; evite renderizar itens ocultos.
• Chaves: garanta chaves estáveis; evite índices quando a ordem pode mudar.
• Efeitos: verifique arrays de dependência; evite efeitos que re-executam a cada renderização.
• Estilo/layout: observe thrash de layout custoso ou renderizações grandes de Markdown/diff.

Padrões de Otimização

Isole o estado de "tick"

Mova um contador de timer ou animação para um filho para que a lista pai nunca re-renderize a cada tick.

// ❌ Before – entire parent (and list) re-renders every second
function Dashboard({ items }: { items: Item[] }) {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <>
      <Clock tick={tick} />
      <ExpensiveList items={items} /> {/* re-renders every second */}
    </>
  );
}

// ✅ After – only <Clock> re-renders; list is untouched
function Clock() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <span>{tick}s</span>;
}

function Dashboard({ items }: { items: Item[] }) {
  return (
    <>
      <Clock />
      <ExpensiveList items={items} />
    </>
  );
}

Estabilize callbacks com useCallback + memo

// ❌ Before – new handler reference on every render busts Row memo
function List({ items }: { items: Item[] }) {
  const handleClick = (id: string) => console.log(id); // new ref each render
  return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);
}

// ✅ After – stable handler; Row only re-renders when its own item changes
const Row = memo(({ item, onClick }: RowProps) => (
  <li onClick={() => onClick(item.id)}>{item.name}</li>
));

function List({ items }: { items: Item[] }) {
  const handleClick = useCallback((id: string) => console.log(id), []);
  return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);
}

Prefira dados derivados fora da renderização

// ❌ Before – recomputes on every render
function Summary({ orders }: { orders: Order[] }) {
  const total = orders.reduce((sum, o) => sum + o.amount, 0); // runs every render
  return <p>Total: {total}</p>;
}

// ✅ After – recomputes only when orders changes
function Summary({ orders }: { orders: Order[] }) {
  const total = useMemo(() => orders.reduce((sum, o) => sum + o.amount, 0), [orders]);
  return <p>Total: {total}</p>;
}

Padrões adicionais

• Divida linhas: extraia linhas de lista para componentes memorizados com props estreitas.
• Adie renderização pesada: renderize preguiçosamente ou colapse conteúdo custoso até ser expandido.

Passos de Validação de Profiling

1. Abra a aba Profiler do React DevTools.
2. Clique em Record, realize a interação lenta e depois em Stop.
3. Mude para a visualização Flamegraph; qualquer barra rotulada com um componente e tempo > ~16 ms é um candidato.
4. Use o Ranked chart para ordenar por tempo de renderização próprio e mirar nos principais infratores.
5. Aplique uma otimização por vez, grave novamente e compare as contagens e durações de renderização com a linha de base.

Referência de Exemplo

…