Analysez votre code React à la recherche d'anti-patterns avec React Doctor

Les applications React se dégradent rarement d’un seul coup. Elles se détériorent progressivement — un useEffect inutile par-ci, quelques couches supplémentaires de prop drilling par-là, un attribut d’accessibilité discrètement manquant. Lorsque ces problèmes apparaissent en production, les corriger coûte cher.

React Doctor est un outil CLI open source conçu pour détecter ces problèmes avant qu’ils ne s’accumulent. Exécutez une seule commande, obtenez un score de santé du code de 0 à 100, et recevez des diagnostics exploitables sur l’ensemble de votre base de code.

Ce que React Doctor fait réellement (et ce qu’il ne fait pas)

React Doctor est un outil d’analyse statique, pas un profileur d’exécution. Il ne mesure pas les temps de rendu ni ne suit les re-rendus de composants dans une application en cours d’exécution. Au lieu de cela, il lit votre code source et identifie les problèmes structurels avant même que vous n’exécutiez l’application.

Cette distinction est importante. Des outils comme le React DevTools Profiler vous montrent ce qui est lent à l’exécution. React Doctor vous montre pourquoi votre code est structurellement fragile — du prop drilling qui rend le refactoring pénible, des effets qui ne devraient pas exister, des exports morts qui gonflent votre bundle, et des violations d’accessibilité qui affectent de vrais utilisateurs.

C’est également plus qu’un linter. Des outils comme ESLint détectent les problèmes de syntaxe et appliquent des règles de style. React Doctor analyse la santé globale du projet en scannant des catégories comme l’architecture, la taille des bundles, la sécurité, le code mort et les patterns spécifiques aux frameworks. Il détecte automatiquement votre framework et votre configuration React, puis active les règles pertinentes.

Comment analyser votre projet React en 30 secondes

Aucune installation requise. Naviguez jusqu’à la racine de votre projet et exécutez :

npx -y react-doctor@latest .

Ajoutez --verbose pour voir les chemins de fichiers exacts et les numéros de ligne pour chaque problème :

npx -y react-doctor@latest . --verbose

React Doctor effectue deux passes en parallèle : une passe de lint sur les règles actives, et une passe de détection de code mort qui signale les fichiers, exports, types et doublons inutilisés. Les résultats sont notés par gravité — les erreurs pèsent plus lourd que les avertissements — produisant un score de santé final : 75+ est Excellent, 50–74 nécessite des améliorations, en dessous de 50 est Critique.

Les anti-patterns React qu’il détecte

Voici le type de problèmes structurels que React Doctor identifie couramment :

Utilisation inutile de useEffect — Lorsque les dérivations d’état se produisent à l’intérieur d’effets au lieu d’être calculées pendant le rendu, vous obtenez des bugs de données obsolètes et une logique plus difficile à suivre. Les recommandations officielles de React préconisent de plus en plus de dériver les valeurs pendant le rendu lorsque c’est possible plutôt que de s’appuyer sur des effets.

Passage profond de props — Passer des props à travers de nombreuses couches de composants est un signe d’alerte structurel. La solution est souvent le Context, la composition ou la co-localisation de l’état.

Clés de liste pouvant causer un rendu instable — L’utilisation d’identifiants instables (comme les index de tableau) peut entraîner des bugs d’interface utilisateur subtils lorsque les listes sont réordonnées.

Imports de bibliothèques lourdes — Importer des bibliothèques entières peut gonfler les bundles. React Doctor peut mettre en évidence les patterns où le code splitting via React.lazy() ou des outils de framework comme next/dynamic pourrait aider.

Lacunes d’accessibilité — Des attributs manquants comme alt sur les images ou d’autres oublis d’accessibilité peuvent passer inaperçus pendant le développement mais affecter de vrais utilisateurs.

Secrets potentiels dans le code source — L’analyse statique peut détecter des patterns qui ressemblent à des clés API ou des tokens committés dans un dépôt.

Intégrer React Doctor dans le workflow de votre équipe

Pour les équipes, l’intégration la plus précieuse est le workflow GitHub Actions :

- uses: actions/checkout@v5
  with:
    fetch-depth: 0
- uses: millionco/react-doctor@main
  with:
    diff: main
    github-token: ${{ secrets.GITHUB_TOKEN }}

L’option diff analyse uniquement les fichiers modifiés dans une pull request, maintenant la CI rapide. Lorsque github-token est fourni, les résultats sont publiés directement sous forme de commentaire PR — pas besoin de fouiller dans les logs.

Pour les workflows assistés par IA, vous pouvez enseigner aux agents de codage comme Cursor ou Claude Code les règles de bonnes pratiques React utilisées par React Doctor :

curl -fsSL https://react.doctor/install-skill.sh | bash

Cela permet à votre agent de diagnostiquer les problèmes et de proposer des corrections en utilisant le même ensemble de règles que React Doctor applique.

Scores de santé en conditions réelles

React Doctor a été exécuté sur plusieurs projets React open source bien connus :

Même les projets matures et bien maintenus ont une marge d’amélioration. Ces problèmes s’accumulent silencieusement, et l’analyse automatisée est l’un des moyens les plus simples de les détecter tôt.

Conclusion

React Doctor ne remplace pas la revue de code, mais il en supprime les parties fastidieuses. Les problèmes structurels, les lacunes d’accessibilité, le code mort et les risques de sécurité sont détectés automatiquement, permettant aux relecteurs humains de se concentrer sur les décisions de logique et de conception.

Exécutez-le une fois sur votre projet actuel. Le score que vous obtiendrez vous en dira plus sur la santé de votre base de code qu’une semaine de revue manuelle.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.