What Is React Scan and How Does It Help You Find React Performance Problems?

React Scan is an open-source tool from Million that automatically highlights which components in a React app are re-rendering, so you can spot wasted renders without manually profiling. It's aimed at developers who suspect a UI feels sluggish but don't yet know which component is responsible. According to Million's own site, React Scan is one of the tools the company open-sources as part of its stated mission to "fix the web," alongside React Doctor.

The problem React Scan addresses

React re-renders a component whenever its state or props change — and sometimes when they haven't changed in any meaningful way. A parent re-rendering can cascade down and re-render children that produce identical output, which wastes work and can make interactions feel laggy.

Finding those wasted renders by hand is tedious: you either reason through the component tree or open a profiler and interpret a flame chart. React Scan takes a different approach — it surfaces re-renders visually, in the running page, as they happen.

How to use it

The typical workflow is to add React Scan to a development build, load the app, and watch which components light up as you interact.

1. Add it to your project. React Scan is distributed as a package you import into your app entry point (or inject via a script tag) so it runs alongside your React code in development.
2. Run your app in development mode. Load the page and interact with it the way a user would — click buttons, type in inputs, open menus.
3. Watch the highlights. Components that re-render get visually outlined, so you can see the render activity directly on the page rather than in a separate panel.
4. Trace the cause. When a component you didn't expect re-renders, work backward to the state change or parent render that triggered it, then decide whether to memoize, restructure, or leave it alone.

The expected result is a short list of components worth investigating, instead of a full profiling session.

Reading the output

The core signal is simple: a highlighted component re-rendered. What matters is why:

• A component re-rendering because its own state changed is usually expected.
• A component re-rendering because a parent re-rendered, while its props stayed the same, is often the wasted work you're hunting for.
• Frequent re-renders during an interaction (typing, scrolling, dragging) are worth a closer look, since they can compound into visible jank.

Treat the highlights as a pointer to where to look, not as a verdict that something is broken. A re-render is only a problem if it's unnecessary or expensive.

React Scan vs. React DevTools Profiler

Both tools answer "what re-rendered," but they fit different moments:

Reach for React Scan when you want a fast, low-friction signal during normal interaction. Reach for the Profiler when you need timings, commit details, or to confirm that a fix actually reduced render cost.

Caveats to keep in mind

• It's a development aid. Instrumentation like this belongs in development, not in a production build shipped to users.
• A re-render isn't automatically a bug. React is designed to re-render; the question is whether the work is necessary and cheap enough. Optimizing every highlight can add complexity for no real gain.
• It points, it doesn't diagnose. React Scan tells you that something re-rendered. Confirming why — and whether fixing it helps — still means reading your component logic and, often, measuring with the Profiler.
• Version and API details change. Check the current React Scan documentation for the exact install and setup steps for your React version, since the package's entry-point usage can evolve.

For a quick read on whether your app is doing more rendering than it should, React Scan is a low-effort first pass. Pair it with the Profiler when you need numbers to justify a change.