Skip to main content
React Scan in action

​
What is React Scan?

React Scan automatically detects performance issues in your React app. It highlights exactly the components you need to optimize, requires no code changes, and is always accessible through a toolbar on your page.

Zero Configuration

Just drop it in - no code changes required. Works with any React app.

Precise Detection

Highlights exactly which components are causing performance issues.

Always Accessible

Built-in toolbar lets you toggle scanning and inspect renders on the fly.

Production Ready

Safely use in development with automatic production detection.

​
Why React Scan?

React can be tricky to optimize. Component props are compared by reference, not value - which is intentional, since rendering is often cheap. However, this makes it easy to accidentally cause unnecessary renders that slow down your app. Even production apps with hundreds of engineers struggle with optimization. React Scan helps you identify these issues automatically. 
// This creates new objects on every render
<ExpensiveComponent 
  onClick={() => alert("hi")} 
  style={{ color: "purple" }} 
/>

​
Quick Start

Get started in seconds with the automatic setup: 
npx react-scan@latest init
The init command automatically:
  • Detects your framework (Next.js, Vite, Remix, etc.)
  • Installs the package
  • Configures your project

Get Started Now

Follow the complete quickstart guide to install and use React Scan

​
Key Features

Visual Render Detection

See which components are re-rendering in real-time with visual highlights

Interactive Toolbar

Control scanning, inspect components, and view performance metrics

Performance Monitoring

Track FPS, slowdowns, and unnecessary render notifications

Browser Extension

Install the extension to scan any React app without code changes

​
How It Works

React Scan instruments React’s internals to monitor component renders. When a component re-renders, React Scan:
  1. Detects the render and measures its performance impact
  2. Highlights the component with color-coded overlays (red for slow, yellow for fast)
  3. Tracks changes that caused the render (props, state, context)
  4. Reports metrics in the toolbar (render count, FPS, slowdowns)
All of this happens with minimal overhead, so you can keep React Scan running during development without impacting your workflow.

​
Browser Extension

No code changes needed! Install the React Scan browser extension to scan any React website:
1

Download the extension

Available for Chrome and Firefox from the GitHub releases
2

Navigate to any React site

Open any website built with React
3

Click the extension icon

React Scan will automatically start detecting renders

​
What’s Next?

Quickstart Guide

Install React Scan and detect your first performance issue

Installation Methods

Choose the best installation method for your framework

Understanding Renders

Learn what causes components to re-render and how to fix it

API Reference

Explore the full API for advanced use cases

​
Community & Support

GitHub

Star the repo and contribute

Discord

Join our community

Issues

Report bugs and request features

Build docs developers (and LLMs) love

Get started for freeTalk to us