React Scan: automatic render highlighting for React apps, and what it leaves to you
Scan and fix React performance issues
At a glance
- What is it?
- React Scan highlights components that re-render unnecessarily by patching React's internals at runtime. It installs in one command, needs no code changes, and ships an MIT-licensed package plus a separate browser extension.
- Who is it for?
- React Scan fits teams debugging unnecessary re-renders in a normal React, Next.js, Vite or Remix app, because the init command and the script tag cover those setups. It is the wrong tool for React Native, for production profiling, and for anyone who wants a written report rather than an overlay.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository last received commits 45 days ago.
- What is it written in?
- Mainly TypeScript, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on September 29, 2026, and from our analysis. They are not legal advice.
Editorial analysis
The reference-comparison problem React Scan targets
React compares props by reference, not by value. The README states this is intentional, because rendering can be cheap to run. The practical consequence is that an inline arrow function or an object literal created during render produces a new reference on every pass, so a child component re-renders even when nothing meaningful changed. The README's own example is a component receiving an onClick arrow and a style object written inline.
The audience is React application developers who already suspect a component tree is doing too much work and want to see which components, rather than guess. React Scan targets that gap: it highlights the components that re-render, so the search space narrows from the whole tree to specific nodes. It is not a bundle analyzer and it does not measure network or paint time. It is a render-focused tool for people working inside a running app.
How the scanner observes renders without code changes
The README describes React Scan as automatically detecting and highlighting renders that cause performance issues, and says it requires no code changes. The mechanism implied by the API is instrumentation of React's internal fiber tree: the Options interface exposes onRender with a fiber argument and an array of Render objects, and the onRender(Component, callback) helper hooks into a single component's renders. Those callbacks fire around commit boundaries, since the interface also exposes onCommitStart and onCommitFinish.
The data flow is therefore: React renders a component, React Scan's instrumentation observes the fiber and the render records, and the toolbar on the page visualizes the result. The animationSpeed option accepts "slow", "fast" or "off", which controls how the highlight is drawn, not what is collected. A log option writes renders to the console instead of relying on the overlay. The toolbar is on by default and can be turned off with showToolbar: false.
One detail worth noting: the Options interface includes dangerouslyForceRunInProduction, defaulting to false, and the README marks it as not recommended. That flag exists, which tells you the normal path is development builds. Treat the production flag as a debugging escape hatch, not a deployment configuration.
Installing React Scan and reading your first highlight
The README's quick start is a single command. It detects your framework, installs the package with npm, and sets up the project. Node 22 or newer is required by the repository's engines field.
npx -y react-scan@latest initAfter it finishes, start your dev server as usual and load the app. According to the README, you should see a toolbar on the page and components highlighted as they re-render. If the automatic setup does not fit your project, install the package as a dev dependency and add the script tag yourself.
npm install -D react-scanFor a plain HTML entry point, the README says to paste the script before any other scripts in index.html.
<!-- paste this BEFORE any scripts -->
<script
crossOrigin="anonymous"
src="//unpkg.com/react-scan/dist/auto.global.js"
></script>For Next.js App Router, the README places the script inside app/layout.tsx with the beforeInteractive strategy.
import Script from "next/script";
export default function RootLayout({ children }) {
return (
<html>
<head>
<Script
src="//unpkg.com/react-scan/dist/auto.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
/>
</head>
<body>{children}</body>
</html>
);
}For Vite, the README's example puts the same script in the head of index.html, above the module script that mounts the app. For Remix, it goes inside app/root.tsx ahead of the Links component. Pages Router users add it to pages/_document.tsx. There is also a browser extension, installed by following the guide linked from the README, for inspecting apps you did not build.
Where React Scan stops being the right tool
The README does not document rollback. If the init command edits your entry files and you want to undo it, you are reversing the changes by hand, so run it on a clean working tree.
The script tag loads from unpkg at runtime. That is a third-party origin in your page, and any Content Security Policy that restricts script-src will block it until you add the host. The crossOrigin="anonymous" attribute is present in every example, which matters for error reporting but does not change the CSP requirement. For an app with a strict policy, the npm package plus a local import is the safer route, though the README's manual path is written around the script tag.
React Native is not covered. Every installation guide in the README targets a web entry point: index.html, app/layout.tsx, pages/_document.tsx, app/root.tsx. Nothing addresses a native runtime.
The production flag is the other boundary. Running the scanner in production is explicitly marked not recommended, which makes sense: instrumentation that walks the fiber tree on every render adds work to the thing you are measuring. Use it against a development build, or against the deployed app through the browser extension if you need to see real traffic.
Finally, the README opens with a recommendation to use React Doctor instead, describing it as bringing React Scan's performance focus to coding agents with static checks for architecture, security and accessibility. A project that points readers elsewhere in its own first paragraph is telling you something about where its maintainers expect the work to continue.
React Scan against the React DevTools Profiler
The React DevTools Profiler records a session and presents a flame chart you scrub through afterward. It answers the question of what happened during a specific interaction, and it requires you to start and stop a recording. React Scan inverts that: it is always on while the page is loaded, and it marks components as they re-render in the live app. You do not decide when to measure.
That difference decides which one you reach for. If you have a reproducible interaction and want a timeline with durations, the Profiler gives you the timeline. If you want to browse the app and have the problem components announce themselves, React Scan gives you that. The README acknowledges the Profiler's lineage in its acknowledgments, crediting React DevTools for the initial idea of highlighting renders.
The other named influence is why-did-you-render, credited for the concept of detecting unnecessary renders. That library is a monkey-patching tool you configure per component, and it reports through console output. React Scan's onRender(Component, callback) helper is the closest equivalent here, but the default experience is the visual overlay rather than log lines. Million Lint is credited for scanning and linting approaches, and it is a separate product from this repository.
Maintenance, releases and the MIT licence
The last push to the repository was on 2026-08-16. The most recent release listed is v0.4.3 from 2025-06-29, alongside v0.4.2 and v0.4.1 from the same day. So the codebase has moved since the last tagged release, and the version number is still in the 0.4 range, which is worth knowing if you pin versions: a 0.x dependency can change behavior between minor releases.
The repository is a pnpm workspace driven by Turborepo, with packages for react-scan, @react-scan/extension and @react-scan/vite-plugin-react-scan, plus a kitchen-sink app and a Playwright e2e suite. Releases go through Changesets, so the changelog lives in the .changeset directory and the published packages. There is a Vite plugin package in the build pipeline even though the README's own Vite instructions use the script tag, which is a discrepancy worth checking in the docs directory before you pick an integration path.
The licence is MIT, which permits commercial use and modification with the copyright notice retained. React Scan is credited to Aiden Bai, Million Software, Inc. and contributors. MIT says nothing about the unpkg CDN you load the script from, and nothing about whether the browser extension is distributed under the same terms; the README does not state the extension's licence. If your legal review cares about that distinction, it is unresolved in the README.
Editorial conclusion
React Scan fits teams debugging unnecessary re-renders in a normal React, Next.js, Vite or Remix app, because the init command and the script tag cover those setups. It is the wrong tool for React Native, for production profiling, and for anyone who wants a written report rather than an overlay. Before adopting it, verify that the unpkg script loads inside your Content Security Policy, check that your framework's script placement matches the guide for your router, and read the README note recommending React Doctor, since that is the direction the project itself points readers toward.
Frequently asked questions
How do I use React Scan?
Run the init command, which detects your framework, installs the package and sets up the project, then load your app in development. You should see a toolbar on the page with components highlighted as they re-render. If you prefer manual setup, install react-scan as a dev dependency and add the unpkg script tag before any other scripts.
What is React Scan?
It is a tool that automatically detects performance issues in a React app and highlights the components you need to optimize. It requires no code changes and stays accessible through a toolbar on the page. The README credits React DevTools, Million Lint and why-did-you-render as influences.
Is React Scan safe?
The package is MIT-licensed and the README's script tag examples all include crossOrigin="anonymous" and load from unpkg, so the runtime script comes from a third-party origin. The README marks running it in production as not recommended, and the option that forces it is named dangerouslyForceRunInProduction. Whether that is acceptable depends on your Content Security Policy and your review of the source.
How does React Scan compare with the React DevTools Profiler?
The Profiler records a session you start and stop, then presents a flame chart to scrub through. React Scan runs continuously while the page is loaded and marks components as they re-render, so you do not choose when to measure. The README credits React DevTools for the initial idea of highlighting renders.
How does React Scan compare with React DevTools?
React DevTools is credited in the README for the initial idea of highlighting renders, and it includes the Profiler for recorded sessions. React Scan runs continuously while the page is loaded and marks components as they re-render, without you starting a recording. The two are complementary rather than replacements.
What are the alternatives to React Scan?
The README names why-did-you-render for the concept of detecting unnecessary renders, and Million Lint for scanning and linting approaches. It also opens by recommending React Doctor, which it describes as bringing React Scan's performance focus to coding agents with static checks for architecture, security and accessibility.
Official sources
Add this badge to your README
If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.
[](https://hysenlabs.com/projects/aidenybai-react-scan)