React Scan
Finds React components that re-render too often, highlighting them in your running app.
- Stars
- 21.9k
- Forks
- 391
- Licence
- MIT
- Language
- TypeScript
- Last update
- 3 months ago
- Type
- Dev tool
What it is
React Scan is a developer tool that watches your React app while it runs and highlights components that re-render unnecessarily, which can make an app slow. It is added with a script tag or an npm install and needs no changes to your code. The README also notes that the project now recommends React Doctor, a related tool aimed at coding agents.
- Open a React page and see which components re-render when you click or type
- Log renders to the console with the log option to inspect what changed
- Hook into a specific component's renders with the onRender API
- Adjust animation speed or hide the toolbar through options
Great for
- Developers debugging slow React pages in development
- Teams looking for unnecessary re-renders without reading every component
- Developers who want a visual overlay rather than manual profiling
- Developers using Next.js, Vite, or Remix, which the README gives setup examples for
Not ideal for
- Production monitoring: the README says forcing it to run in production is 'not recommended', so it is meant for development use
- People who want an automatic code fixer: the description says 'scan and fix', but the README only describes detecting and highlighting issues
- Non-React projects, since it targets React specifically
How to get it
- 1
Install with a package manager
You'll need: Node.js (version not stated in README)
Automatic setup (detects framework and installs)
npx -y react-scan@latest initManual install via npm
npm install -D react-scan - 2
Run it
- Run npx -y react-scan@latest init in your project folder
- Start your React app in development mode
- Open the page and look for highlighted components as you interact with it
- Use the toolbar on the page to inspect renders
- 3
Get the most out of it
- Use the log option to print renders to the console for detail
- Use the useScan hook or scan function to start scanning from code
- Use setOptions to change settings at runtime without reloading
- Use onRender to track one specific component's renders
Downloads
Strengths
- Requires no code changes beyond adding the script or package
- Highlights specific components on screen instead of requiring manual profiling
- Available as an npm package with a guided init command and a browser extension
Trade-offs
- The README recommends React Doctor for new work, so the project's future direction is less clear
- Detection shows where renders happen but the README does not describe automatic fixes
- Relies on loading the script from unpkg in the manual setup examples
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| react-scan (this) | 21.9k | Dev tool | beginner | 3 months ago | Developers debugging slow React pages in development |
| why-did-you-render | 12.5k | Library | intermediate | 7 months ago | React developers investigating slow screens with many memoized or pure components |
| tsdx | 11.5k | Dev tool | beginner | 9 months ago | Developers who want to publish a reusable TypeScript library to npm without writing build configuration |
| pixijs | 48.6k | Library | intermediate | 6 days ago | Web developers building interactive 2D graphics or animations |
| react-native-web | 22.2k | Library | intermediate | 4 days ago | Developers who already use React Native and want the same components on the web |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.