aidenybai/react-scan

★ 21,287TypeScriptAudience · developerComplexity · 2/5ActiveLicenseSetup · easy

Mindmap

mindmap
  root((React Scan))
    What it does
      Detects re-renders
      Highlights problems
      Shows optimization targets
    How to use
      Script tag
      Browser extension
      Framework setup
    Setup options
      Next.js
      Vite
      Remix
    Performance insights
      Reference comparisons
      Prop changes
      Render causes
    API methods
      scan function
      useScan hook
      onRender callback

mindmap root((React Scan)) What it does Detects re-renders Highlights problems Shows optimization targets How to use Script tag Browser extension Framework setup Setup options Next.js Vite Remix Performance insights Reference comparisons Prop changes Render causes API methods scan function useScan hook onRender callback

Things people build with this

USE CASE 1

Add a script tag to your React app and immediately see which components are re-rendering unnecessarily.

USE CASE 2

Use the browser extension to audit performance on any React site without installing dependencies.

USE CASE 3

Call scan() or useScan() in your code to programmatically control when and how the tool analyzes renders.

Tech stack

TypeScriptReactNext.jsViteRemix

Getting it running

Difficulty · easy Time to first run · 5min

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

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.

Copy-paste prompts

Prompt 1

How do I add React Scan to my Next.js app to see which components are re-rendering?

Prompt 2

Show me how to use the useScan hook to detect unnecessary re-renders in my React component.

Prompt 3

What does React Scan highlight and how do I interpret the visual indicators on my page?

Prompt 4

How can I use the onRender callback to log which components are re-rendering and why?

Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.