React Scan

React Scan is a lightweight JavaScript tool that watches a running React app and flags the components re-rendering more than they should. React compares component props by reference rather than by value. So a new object or function on every render slips in easily, and that quiet mistake is why so many React apps feel sluggish even when the code looks fine.

Instead of guessing, React Scan draws a box around each component as it renders and shades it based on how long that render took. The heavier the render, the more visible the flash. You watch the page, and the culprit announces itself.

It works with plain setups. You won't rewrite a single component. You don't need a build step. That dead-simple install is the whole pitch for a tool aimed at developers already deep in a stack of framework config.

Getting Started

1. Run npx -y react-scan@latest init in your project. The command detects your framework, installs the package, and wires up the script for you.
2. Or install it manually with npm install -D react-scan and drop the unpkg script tag into your index.html before any other scripts.
3. Load your app in the browser. Components flash as they render, with the toolbar sitting on the page.
4. Click the flashing components to inspect render counts and timings, then change the code that's recalculating props on every pass.
5. Turn it off in production. It's built to run in development, and forcing it on in a live build is something the docs warn against.