React Scan
A drop-in tool that automatically detects and highlights unnecessary re-renders in a React application, without requiring code changes.
React Scan automatically detects performance issues in a React application by highlighting the specific components causing unnecessary renders, and is designed to be dropped into a project without other code changes. It stays accessible through a toolbar on the page while it is active.
The init command detects the project's framework, installs the react-scan package and sets it up automatically; alternatively, it can be installed manually as an npm package and wired in as a script tag or import, with documented setup for plain script tags, Next.js's App and Pages routers, Vite and Remix, plus a browser extension. An API exposes an imperative scan function and a useScan hook to start scanning, setOptions and getOptions for runtime configuration, and an onRender hook for reacting to a specific component's renders.
The problem it targets is that React compares component props by reference rather than by value, which is intentional for cheap rendering but can cause renders that are easy to introduce by accident, even in large production applications.