React Scan
Aiden Bai / Million Software, Inc. · Programmation
React Scan est un outil gratuit et open source qui repère et met en évidence les composants React à l'origine de problèmes de performances, sans toucher au code.
À propos de React Scan
Qu'est-ce que React Scan
React Scan est un outil JavaScript léger qui observe une app React en cours d'exécution et signale les composants qui se re-rendent plus que nécessaire. React compare les props par référence, pas par valeur. Un objet ou une fonction neufs à chaque rendu passent donc facilement inaperçus, et cette erreur silencieuse explique pourquoi tant d'apps React paraissent lentes alors que le code semble correct.
Plutôt que de deviner, React Scan dessine un cadre autour de chaque composant pendant son rendu et le colore selon la durée de ce rendu. Plus le rendu est lourd, plus le flash est visible. Vous regardez la page, et le coupable se dénonce tout seul.
L'outil fonctionne avec des configurations simples. Vous ne réécrivez pas un seul composant. Vous n'avez pas besoin d'étape de build. Cette installation toute simple résume l'argument d'un outil pensé pour des développeurs déjà plongés dans une pile de configuration de framework.
Pour commencer
- Lancez
npx -y react-scan@latest initdans votre projet. La commande détecte votre framework, installe le paquet et branche le script pour vous. - Ou installez-le à la main avec
npm install -D react-scanet placez la balise de script unpkg dans votreindex.htmlavant tout autre script. - Chargez votre app dans le navigateur. Les composants clignotent pendant leur rendu, avec la barre d'outils posée sur la page.
- Cliquez sur les composants qui clignotent pour examiner les compteurs et les temps de rendu, puis modifiez le code qui recalcule les props à chaque passage.
- Désactivez-le en production. Il est conçu pour tourner en développement, et le forcer dans un build en ligne est déconseillé par la documentation.
Informations sur le produit
Aperçu des tarifs, des plateformes compatibles et des performances de React Scan.
Idéal pour
Les utilisateurs, tâches et cas d'usage où cet outil convient le mieux.
Utilisateurs
- Développeurs React qui peaufinent une interface lente
- Équipes frontend sans spécialiste dédié à la performance
Tâches
- Repérer les re-rendus inutiles
- Déboguer pourquoi une page saccade à l'interaction
- Auditer une bibliothèque de composants
- Repérer tôt les rendus lents
Cas d'usage
- Un tableau de bord qui rame à mesure que les graphiques se remplissent
- Un formulaire qui saccade à chaque frappe
- Un nouveau collègue qui rejoint une grosse base de code React
Fonctionnalités clés
Aucune modification du code requise
Vous ajoutez React Scan sans toucher à vos composants. Posez une balise de script ou lancez la commande init. Il s'attache tout seul à l'app. Pas de composant enveloppe, pas de fonction d'ordre supérieur, rien à nettoyer plus tard si vous décidez de le retirer.
Surlignage visuel des rendus
L'outil encadre chaque composant pendant son rendu et colore le contour selon le temps de rendu. Les rendus lents sautent aux yeux immédiatement. Vous ne lisez pas d'abord des chiffres dans un tableau ; vous regardez la page et laissez le visuel vous conduire vers le problème.
Plusieurs voies d'installation
Vous pouvez charger React Scan via une balise de script depuis unpkg, l'installer comme paquet npm ou passer par l'extension de navigateur. Des guides dédiés couvrent Next.js, Remix et les configurations simples. Vous n'êtes pas laissé à traduire une doc écrite pour une autre pile.
Barre d'outils et options en direct
Une barre d'outils reste sur la page pendant le scan, et vous activez ou désactivez le scan sans redémarrer. Les fonctions scan et useScan le lancent, setOptions et getOptions l'ajustent à l'exécution, et onRender se branche sur un composant précis quand vous voulez regarder de plus près.
Journalisation console et hooks de timing
Activez l'option log et chaque rendu s'affiche dans la console avec son temps. Les hooks de commit (onCommitStart et onCommitFinish) se déclenchent autour de chaque passage de rendu, ce qui aide quand vous voulez relier le travail de React à ce que vous voyez à l'écran.
Open source et gratuit
React Scan est distribué sous licence MIT par Aiden Bai et Million Software, Inc. Pas d'offre payante, pas de limite de postes, pas d'inscription. Le code est sur GitHub. Le projet accepte contributions et rapports de bugs au grand jour.
Avantages et inconvénients
Avantages
- Zéro friction à l'installation : la commande init gère la détection du framework et l'installation pour vous.
- Le retour visuel rend les rendus inutiles évidents pour tout le monde, pas seulement pour les spécialistes de la performance.
- Gratuit et sous licence MIT, il entre donc dans des projets commerciaux sans discussion de budget.
- Fonctionne avec React simple, Next.js, Remix et l'usage en extension de navigateur.
- L'API à l'exécution et le hook onRender permettent d'aller plus loin quand l'overlay ne suffit pas.
Inconvénients
- Il tourne uniquement en développement, il ne repère donc pas les problèmes de performance qui n'apparaissent que dans un build de production.
- L'overlay visuel ne s'affiche qu'à l'écran, vous ne pouvez donc pas scanner un environnement sans interface ni une page rendue côté serveur avant qu'elle n'atteigne le navigateur.
- Si vous n'êtes pas à l'aise avec npm ou une balise de script, l'installation demande tout de même une petite étape dans le projet, et la doc suppose une certaine familiarité avec React.
Questions fréquentes
Oui. React Scan est un logiciel open source publié sous licence MIT, sans offre payante ni compte. Vous installez le paquet et l'utilisez dans votre projet sans frais.
Contenus associés
Découvrez des outils, des compétences et des articles liés à React Scan.
Alternatives à React Scan
Base Code
Base44 (Wix) · Programmation · ProductivitéBase Code est un environnement de développement cloud partagé signé Base44. Votre équipe décrit des modifications sur un dépôt GitHub dans le chat, les vérifie en aperçu et les renvoie sous forme de pull requests.
Google EmbeddingGemma 2
Google DeepMind · Rédaction · Image · ProgrammationGoogle EmbeddingGemma 2 est un modèle ouvert de 740 millions de paramètres qui transforme texte, code, images, audio et images vidéo en vecteurs d'un même espace de 768 dimensions, sur un téléphone ou un ordinateur portable.
GitGlow
GitGlow · Programmation · ProductivitéGitGlow est un client Git de bureau qui place votre code et les modifications de vos agents IA dans une même revue, pour savoir ce qui quitte votre machine avant de livrer.