react-scan: React Performance Scanning Tool

Detects unnecessary re-renders and performance bottlenecks in React apps visually.

Install

bun add -D react-scan   # or: npm install -D react-scan

Setup for Vite + React

Add to index.html <head>, BEFORE all other scripts:

<script crossOrigin="anonymous" src="//unpkg.com/react-scan/dist/auto.global.js"></script>

Full example:

<head>
  <script crossOrigin="anonymous" src="//unpkg.com/react-scan/dist/auto.global.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

How It Works

Loads as a global script, instruments React's reconciler
Shows colored overlays on re-rendering components during interaction
Toolbar appears in bottom-right corner of the page
Color coding: red = slow render, yellow = moderate, green = fast
Displays render count and time per component
Auto-disabled in production (checks NODE_ENV)

Programmatic API

import { scan, onRender, setOptions, getOptions } from "react-scan";

scan({ enabled: true, log: false, showToolbar: true, animationSpeed: "fast" });

onRender(SomeComponent, (fiber, render) => {
  console.log(render.name, render.time + "ms");
});

setOptions({ log: true });

Key Options (window.REACT_SCAN)

Option	Default	Description
enabled	true	Enable/disable scanning
log	false	Log renders to console
showToolbar	true	Show UI toolbar
animationSpeed	"fast"	"slow" \| "fast" \| "off"
dangerouslyForceRunInProduction	false	Run in prod (not recommended)

Removal

Delete the script tag from index.html. Optionally remove the dev dependency:

bun remove react-scan

syntaxhacker/react-scan.md

Select an option

No results found