React Scan - ferramenta que escaneia apps React para encontrar automaticamente problemas de desempenho

• Diferente das ferramentas existentes (Profiler, Why Did You Render?, React Devtools), quase não exige alterações no código e oferece pistas visuais simples e uma API programável
• Detecta e destaca automaticamente renderizações que causam problemas de desempenho, mostrando exatamente quais componentes precisam ser corrigidos
• Como é um Javascript simples, pode ser inserido em qualquer lugar: tag Script, NPM etc.

Por que o React Scan é necessário

• Otimizar React pode ser complicado
• Os props de componentes são comparados intencionalmente por referência, e não por valor. Isso reduz o custo de execução das renderizações
• Mas isso também facilita que renderizações desnecessárias aconteçam por engano, o que pode deixar o app mais lento
• Mesmo em grandes apps de produção com centenas de desenvolvedores, a otimização costuma ser difícil (casos de GitHub, Twitter e Instagram).

Em que o React Scan é melhor que o React Devtools

• Limitações do React Devtools:
  • Como foi projetado como uma ferramenta genérica, não consegue distinguir com clareza renderizações desnecessárias das necessárias.
  • Não possui uma API programável, o que dificulta automatizar o debugging de desempenho.
• Insatisfações pessoais com o recurso de destaque do React Devtools:
  • Atraso na detecção de renderização: o React Devtools processa renderizações em lote, então componentes que renderizam rapidamente aparecem apenas uma vez por segundo.
  • Problema de atualização da posição das caixas: ao rolar a tela ou redimensionar, a posição das caixas não é atualizada.
  • Falta de exibição da contagem de renderizações: não mostra quantas vezes cada componente renderizou.
  • Dificuldade para distinguir renderizações problemáticas: para verificar renderizações lentas ou ineficientes, é preciso inspecionar manualmente os componentes.
  • Experiência de uso insuficiente: o menu fica escondido, então é incômodo ativar e desativar o recurso. A UI não foi pensada para debugging de desempenho.
  • Sem API de programa: não pode ser usado para automatizar debugging nem para tarefas avançadas.
  • Limitado à extensão do Chrome: não pode ser usado em qualquer lugar na web e depende de uma extensão do navegador.
  • Problemas subjetivos de design: as bordas das caixas parecem borradas e dão a sensação de lentidão.
• Diferenciais do React Scan:
  • É uma ferramenta especializada, projetada para debugging de desempenho, e identifica com clareza renderizações desnecessárias.
  • Pode ser usado em todas as plataformas (web, script, npm) e otimiza a experiência do desenvolvedor.
  • Com um roadmap ambicioso de recursos, oferece potencial para ir além do React Devtools.

[plenty]

É bom porque é fácil de entender.

[carnoxen]

Um caso de uso muito apropriado

[kandk]

Talvez porque a demo seja um app pequeno, mas a velocidade de resposta parece boa.