React Scan

React Scan hooks into React through the DevTools global hook. It draws an outline on every component that renders, shows why a selected component rendered, and records slow interactions and dropped frames. It is a development tool. It needs no app code changes beyond loading it before React.

Version facts (npm latest = 0.5.7, peer react/react-dom 16.8–19). The upstream README now recommends React Doctor (bunx react-doctor@latest, static checks) next to React Scan. React Scan is still the tool for live, visual render debugging.

Ground Truth for 0.5.7

Many blog posts, the npm README, and older docs describe features that 0.5.7 does not have. Trust this list over them:

• Outlines have one color (purple). Color does not mean count or slowness. There are no grey "unnecessary render" outlines. trackUnnecessaryRenders is rejected as Unknown option.
• ×N on a label is approximate. Overlapping labels merge, so Row ×40 can be 40 rows that each rendered once.
• Only on-screen components get outlines. Off-screen renders still reach onRender.
• Dead exports: onRender(Component, cb) never fires, getReport() is always empty, useScan is not a hook (it is setOptions + start), and render.changes in callbacks is always []. Use the scan({ onRender }) option and compute causes from the fiber yourself (the bundled probe does this).
• The production guard does not protect you when React Scan loads first. Verified: a script loaded before a production React build starts and shows the toolbar. Gate it yourself.
• Options in localStorage["react-scan-options"] override code options. A toolbar toggle saved earlier as enabled: false silently stops outlines and onRender.
• The CLI has only init. npx react-scan <url> (Playwright mode) and the monitoring API were removed in 0.5.0.
• 0.5.6+ breaks webpack/Rspack builds of the module import (named JSON import from react-grab/package.json, issues #447/#467). Use the script tag, pin 0.5.5, or relax exportsPresence (see troubleshooting.md).