React Doctor : posez un diagnostic sur votre codebase résolvez les problèmes
Une commande pour savoir exactement où votre code React prend de mauvaises habitudes et comment l'intégrer directement dans votre agent de code.
TLDR;
React Doctor est un outil CLI open source qui scanne votre codebase React et lui attribue un score de 0 à 100
Il détecte plus de 60 types de problèmes : anti-patterns, code mort, failles de sécurité, accessibilité
Il s’appuie sur oxlint pour analyser des milliers de lignes en quelques secondes
Vous pouvez l’intégrer à votre agent de code (Cursor, Claude Code, Windsurf...) en une ligne
Malgré tous les efforts des développeurs, tout codebase comporte des problèmes. Je ne parle pas de bugs visibles, mais plutôt de maladresses ou de conséquences de non respect des bonnes pratiques. Au hasard, des useEffect qui font trop de choses, des composants dont les props sont descendues sur 4 niveaux, des fichiers qui ne servent plus à rien mais que personne n’ose supprimer… ça vous dit quelque chose ?
Le problème, c’est que personne n’a le temps de tout auditer à la main. Eh bien aujourd’hui je vous propose de découvrir React Doctor qui fait ce travail en quelques secondes. Et la cerise sur la gâteau, c’est qu’il vous donne un score.
Ce que votre linter ne vous dit pas
Vous utilisez probablement déjà ESLint. C’est un outil très pratique qui identifie les erreurs de syntaxe, les variables inutilisées, les imports manquants, etc. Malheureusement, il ne vous dit pas que votre composant UserDashboard a 4 useState qui mériteraient un useReducer, que vous chargez des graphiques au premier rendu alors que vous pourriez les lazy-loader ou encore que vous avez un fichier entier qui n’est importé nulle part depuis 6 mois. On ne peux pas lui en vouloir, il n’est pas fait pour ça.
Mais c’est là qu’intervient React Doctor.
Créé par le développeur derrière Million.js et React Scan, c’est un outil CLI open source qui va plus loin que le linting classique. Il fait deux passes sur votre code en parallèle : une analyse de 60+ règles spécifiques à React et une détection de code mort. Enfin, il attribue un score entre 0 et 100 :
75 et plus : votre projet se porte bien
entre 50 et 74 : vous avez du travail
en dessous de 50 : vous allez devoir sérieusement penser à corriger votre codebase
Ce qu’il détecte concrètement
Voici ce que React Doctor cherche :
Performance : il repère les librairies lourdes chargées sans lazy loading, les re-renders inutiles, les états qui pourraient être refactorisés. Si vous utilisez une grosse dépendance au premier rendu sans y penser, il vous le dira.
Sécurité : c’est probablement la détection la plus précieuse : les clés hardcodées dans le code (arrêtez ça !), l’utilisation de
dangerouslySetInnerHTMLsans précaution, les informations sensibles exposées dans des props…Architecture : le prop drilling sur plusieurs niveaux, les composants trop larges qui essaient de tout faire, les effets qui cumulent trop de responsabilités. Tout ce qu’on accumule quand on va vite et qu’on se dit “je refactore la semaine prochaine”.
Code mort : les fichiers non importés, les exports inutilisés, les types déclarés mais jamais utilisés. Sur un projet qui a quelques années, cette détection seule vaut déjà le coup d’oeil.
Accessibilité : les
altmanquants, les éléments interactifs mal structurés. Le résultat n’est pas exhaustif, mais les erreurs les plus courantes sont couvertes.
Une commande pour démarrer
Pas besoin d’installer quoi que ce soit d’autre que la librairie. Rendez-vous à la racine de votre projet et vous lancez :
npx -y react-doctor@latest .C’est tout. En quelques secondes, vous avez votre score et la liste des problèmes détectés.
Si vous voulez voir les fichiers et numéros de ligne concernés, ajoutez --verbose :
npx -y react-doctor@latest . --verboseCe qui est bien pensé, c’est que l’outil détecte automatiquement le contexte de votre codebase et notamment le framework utilisé : Next.js, Vite, Remix, React Native. Les règles s’adaptent en fonction, vous n’avez pas besoin de configurer quoique ce soit pour commencer.
Sur les projets en monorepo, il reconnaît la structure et vous laisse choisir quel package analyser.
L’intégration avec votre agent de code
React Doctor devient vraiment intéressant si vous utilisez des outils IA comme Claude Code, Cursor et autres.
Vous pouvez l’utiliser comme skill pour votre agent de code. Une ligne suffit :
curl -fsSL https://react.doctor/install-skill.sh | bashUne fois installé, votre agent connaît les 47+ règles de bonnes pratiques React que React Doctor applique. Il peut donc diagnostiquer lui-même, identifier les problèmes et proposer des corrections sans que vous ayez à tout lui expliquer.
Et si vous préférez une approche programmatique, il y a aussi une API Node.js pour l’intégrer dans une pipeline CI ou un script personnalisé.
Ce que les projets populaires obtiennent
Le site de React Doctor publie un leaderboard des projets open source analysés. C’est très instructif et ça montre que même les projets maintenus par des équipes expérimentées ont des marges de progression :
tldraw et Excalidraw obtiennent tous les deux 84
Twenty est à 78
Supabase est à 69
Sentry à 64
Cal.com à 63.
On peut même dire que c’est rassurant : ça ne signifie pas qu’ils écrivent du mauvais code, seulement que la dette s’accumule naturellement sur n’importe quelle codebase active. Et ça légitimise l’utilisation de React Doctor.
Si vous voulez contribuer à un projet open source mais que vous ne savez pas par où commencer, c’est une idée concrète : scannez un projet avec React Doctor, identifiez les erreurs et proposez une PR.
Que faire à partir de là ?
Cette semaine, prenez 5 minutes et lancez React Doctor sur un projet que vous maintenez, que ce soit un projet personnel ou professionnel. Même si vous vous attendez à un bon score, les résultats ont souvent quelque chose de surprenant.
Si cette newsletter vous a été utile, partagez-la à un collègue React. Et si vous n’êtes pas encore abonné, c’est le moment ! Ça me soutient dans mon effort de réflexion et de rédaction en plus de mon job à plein temps !