aidenybai/react-scan

React Scan is a developer tool that automatically detects performance problems in React applications and highlights them visually on screen. It identifies which components are re-rendering unnecessarily and shows you exactly where to focus your optimization effort, without requiring any code changes to your existing app. You add it by dropping a single script tag into your HTML file, or through framework-specific setup for Next.js (App Router and Pages Router), Vite, and Remix. There is also a browser extension. Once active, a toolbar appears on the page, and components that trigger unnecessary renders are highlighted as they happen. The core performance problem it addresses is that React compares props by reference rather than by value, which makes it easy to accidentally create new objects or functions on each render (like inline arrow functions or style objects), causing child components to re-render even when nothing meaningful changed. An API is also available for programmatic control: you can start scanning imperatively with scan(), use a hook with useScan(), or hook into specific component renders with onRender(). The tool is MIT-licensed and produced by Aiden Bai and Million Software, Inc.