Minha aplicação React ficou cada vez mais lenta nos últimos meses e não entendo por quê. Comecei a olhar com o Chrome DevTools agora, mas não consigo fazer muito sentido das métricas de desempenho. Existe uma forma simples de encontrar os gargalos?
Inicia tua app com `npm run build` e vê o tamanho do bundle - assim dá pra saber de cara se algum package tá inchado demais. Muitas vezes acontece de importar bibliotecas inteiras sem necessidade, quando na verdade você só precisa de uma função pequenininha. Um truque prático: usa a auditoria Lighthouse no Chrome DevTools, não só as métricas de performance - ela mostra muito mais direto onde tá travando de verdade e dá sugestões concretas de melhorias em vez de só números criptografados.
O problema mais comum é re-renderização desnecessária - dá uma olhada em quais componentes estão se renderizando constantemente mesmo sem mudanças nas props. Com o Chrome DevTools você consegue usar a aba React Profiler e ver exatamente quais componentes demoram mais e quantas vezes renderizam. Frequentemente `React.memo()` em componentes individuais ou `useMemo()` para cálculos pesados já ajuda a otimizar isso. Se não resolver, pode ser que seu state esteja organizado muito centralizadamente e qualquer pequena mudança renderiza a app inteira - aí ajudaria usar Context API ou uma ferramenta de state management como Redux.
Se a app ficou mais lenta ao longo dos meses, vale a pena dar uma olhada nas tuas dependências - alguns packages crescem com o tempo ou trazem mais código que você nem precisa. Com `npm ls` ou `yarn why` você consegue verificar quais bibliotecas estão instaladas em duplicata ou por que determinados pacotes estão lá. Por falar nisso: no Chrome DevTools, na aba Performance, você consegue gravar uma sessão e aí vê concretamente onde a app está perdendo tempo - olha a atividade da main thread, não só as métricas individuais.
Antes de te perderes muito nos Chrome DevTools: na maioria das vezes não é a performance do navegador que é o problema de verdade, mas sim que tua app carrega muito código ou faz muitas requisições de API. É uma surpresa chata quando você só fica olhando para os Flame Charts.
Eu começaria com dois checks práticos: Primeiro, abre a aba Network e vê como estão o tamanho dos teus bundles e quanto tempo as chamadas de API levam. Se tem algum arquivo JavaScript gigante por aí ou o servidor demora uma eternidade para responder, nenhuma otimização de React vai te ajudar. Segundo, usa `npm outdated` ou dá uma olhada na tua package.json - às vezes você puxa pacotes enormes sem querer através de dependencies que nem usa ativamente. Com `npm ls` também dá pra ver quais packages estão instalados mais de uma vez.
Se tudo isso parece normal, aí o React DevTools (o plugin separado do navegador, não o Chrome DevTools) pode te ajudar: com isso você vê ao vivo quais componentes estão renderizando e com que frequência. Isso é bem mais revelador do que qualquer métrica de performance. Procura aí por componentes que ficam se renderizando de novo o tempo todo, mesmo que seus inputs sejam iguais - isso é realmente um culpado bem comum.
Entrarpara responder.
