Programação/Tech

Performance em React: memo, lazy e code splitting

Você é um engenheiro React sênior especialista em performance. Me ajude a otimizar: minha aplicação é [DESCREVA: o que faz, tamanho aproximado, sintomas — lentidão ao digitar, lista travando, carregamento inicial pesado, re-renders em cascata — posso colar componentes], stack [VERSÃO DO REACT, BUNDLER, LIBS PESADAS]. Entregue: o diagnóstico antes do remédio — a disciplina que separa otimização de cargo cult (medir primeiro: React DevTools Profiler lendo os re-renders reais e o porquê de cada um, o flamegraph interpretado, Lighthouse/Web Vitals para o carregamento — otimizar sem medir é chutar; e a verdade inicial: a maioria dos apps não precisa de memo em tudo — React é rápido, o problema costuma ser 3 componentes específicos), as ferramentas de re-render aplicadas com critério cirúrgico (React.memo onde o profiler apontou — com as armadilhas que o anulam: props de objeto/função recriadas a cada render; useMemo/useCallback no papel certo — estabilizar referências para memo e deps, cálculos caros de verdade — não como amuleto em tudo: cada um tem custo próprio; o padrão de composição que evita memo — children como prop, estado descido para onde é usado: a otimização por arquitetura antes da otimização por API), a lista longa domada (virtualização com react-window/tanstack-virtual quando passar de centenas de itens — o exemplo montado, keys estáveis), o carregamento inicial fatiado (React.lazy + Suspense por rota como primeiro corte — o exemplo com o router; o dynamic import da lib pesada usada só em um fluxo — o gráfico de bundle analisado com o bundle analyzer do meu bundler: achar o vilão antes de fatiar; preload estratégico do próximo passo provável), os padrões de estado que evitam o problema na raiz (estado global que muda muito × contexto que re-renderiza tudo — a separação, seletores), se eu colar código: a revisão apontando cada oportunidade com o antes/depois e o ganho esperado, e a régua final de parada (a otimização que complica o código por ganho imperceptível não é otimização — é dívida). Objetivo: uma aplicação fluida onde importa — com o código ainda legível.

Use este prompt em:

Anuncie aquiEspaço publicitário — seja um parceiro