matthewharwood React Doctor
Scans React codebases for security, performance, correctness, and architecture issues. Outputs a 0–100 health score.
After making React code changes:
Run npx -y react-doctor@latest . --verbose --diff and check the score did not regress.
If the score dropped, fix the regressions before committing.
Common dean-stack fixes:
- Do not call JSX-returning helpers from render. Promote repeated JSX to a real Zod-wrapped component and render it with JSX.
- Avoid
flushSyncfor normal interaction state. Use ordinary state updates unless there is a proven DOM measurement requirement that cannot be modeled another way. - Do not keep
will-changein rendered styles. If a transient compositor hint is truly needed, set and clear it from the animation side channel. - Use semantic elements before ARIA role overrides. For progress UI, prefer
<progress>overrole="progressbar"on a generic element.
For general cleanup or code improvement:
Run npx -y react-doctor@latest . --verbose (without --diff) to scan the full codebase. Fix issues by severity — errors first, then warnings.
Command
npx -y react-doctor@latest . --verbose --diff
| Flag | Purpose |
|---|---|
. |
Scan current directory |
--verbose |
Show affected files and line numbers per rule |
--diff |
Only scan changed files vs base branch |
--score |
Output only the numeric score |