React Scan - un outil qui scanne les apps React pour détecter automatiquement les problèmes de performance

• Contrairement aux outils existants (Profiler, Why Did You Render?, React Devtools), il nécessite très peu de modifications du code et fournit de simples repères visuels ainsi qu'une API programmable
• Détecte et met automatiquement en évidence les rendus à l'origine de problèmes de performance, et montre précisément quels composants doivent être corrigés
• Comme il s'agit d'un simple JavaScript, il peut être intégré partout : balise script, NPM, etc.

Pourquoi React Scan est nécessaire

• Optimiser React peut être délicat
• Les props des composants sont délibérément comparées par référence plutôt que par valeur. Cela permet de réduire le coût d'exécution des rendus
• Mais cela facilite aussi l'apparition accidentelle de rendus inutiles, ce qui peut ralentir l'application
• Même dans de grandes applications de production avec des centaines de développeurs, l'optimisation reste souvent difficile (cas de GitHub, Twitter, Instagram).

En quoi React Scan est meilleur que React Devtools

• Limites de React Devtools:
  • Conçu comme un outil généraliste, il ne distingue pas clairement les rendus inutiles des rendus nécessaires.
  • Il ne dispose pas d'API programmable, ce qui rend difficile l'automatisation du débogage des performances.
• Insatisfactions personnelles concernant la fonction de surbrillance de React Devtools:
  • Retard dans la détection des rendus: React Devtools traite les rendus par lots, si bien que les composants qui se rendent rapidement ne sont affichés qu'une fois par seconde.
  • Problème de mise à jour de la position des cadres: lors du défilement ou d'un redimensionnement, la position des cadres n'est pas mise à jour.
  • Manque d'affichage du nombre de rendus: il n'indique pas combien de fois chaque composant a été rendu.
  • Difficulté à distinguer les rendus problématiques: pour vérifier si un rendu est lent ou inefficace, il faut inspecter les composants manuellement.
  • Expérience utilisateur insuffisante: le menu est caché, ce qui rend l'activation et la désactivation fastidieuses. L'interface n'est pas pensée pour le débogage des performances.
  • Aucune API programmatique: impossible de l'utiliser pour automatiser le débogage ou pour des tâches avancées.
  • Limité à l'extension Chrome: il ne peut pas être utilisé partout sur le web et dépend d'une extension de navigateur.
  • Problèmes de design subjectifs: les contours des cadres sont flous et donnent une impression de lenteur.
• Ce qui différencie React Scan:
  • C'est un outil spécialisé conçu pour le débogage des performances, qui identifie clairement les rendus inutiles.
  • Il peut être utilisé sur toutes les plateformes (web, script, npm) et optimise l'expérience développeur.
  • Avec une feuille de route ambitieuse, il offre le potentiel d'aller au-delà de React Devtools.

[plenty]

C’est bien parce que c’est facile à lire.

[carnoxen]

Un cas d’usage très pertinent

[kandk]

C’est peut-être parce que la démo est une petite application, mais la réactivité semble rapide.