README.md
React Scan automatically detects performance issues in your React app.
npx -y react-scan@latest init
The init command will automatically detect your framework, install react-scan via npm, and set up your project.
npx -y react-scan@latest init
Install the package:
npm install -D react-scan
Then add the script tag to your app. Pick the guide for your framework:
Paste this before any scripts in your index.html:
<!-- paste this BEFORE any scripts -->
<script
crossOrigin="anonymous"
src="//unpkg.com/react-scan/dist/auto.global.js"
></script>
Add this inside of your app/layout.tsx:
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>
);
}
Add this into your pages/_document.tsx:
import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";
export default function Document() {
return (
<Html lang="en">
<Head>
<Script
src="//unpkg.com/react-scan/dist/auto.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Example index.html with React Scan enabled:
<!doctype html>
<html lang="en">
<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.tsx"></script>
</body>
</html>
Add this inside your app/root.tsx:
import { Links, Meta, Outlet, Scripts } from "@remix-run/react";
export default function App() {
return (
<html>
<head>
<Meta />
<script
crossOrigin="anonymous"
src="//unpkg.com/react-scan/dist/auto.global.js"
/>
<Links />
</head>
<body>
<Outlet />
<Scripts />
</body>
</html>
);
}
Install the extension by following the guide here.
export interface Options {
/**
* Enable/disable scanning
* @default true
*/
enabled?: boolean;
/**
* Force React Scan to run in production (not recommended)
* @default false
*/
dangerouslyForceRunInProduction?: boolean;
/**
* Log renders to the console
* @default false
*/
log?: boolean;
/**
* Show toolbar bar
* @default true
*/
showToolbar?: boolean;
/**
* Animation speed
* @default "fast"
*/
animationSpeed?: "slow" | "fast" | "off";
onCommitStart?: () => void;
onRender?: (fiber: Fiber, renders: Array<Render>) => void;
onCommitFinish?: () => void;
}
scan(options: Options): Imperative API to start scanninguseScan(options: Options): Hook API to start scanningsetOptions(options: Options): void: Set options at runtimegetOptions(): Get the current optionsonRender(Component, onRender: (fiber: Fiber, render: Render) => void): Hook into a specific component's rendersReact can be tricky to optimize.
The issue is that component props are compared by reference, not value. This is intentional -- rendering can be cheap to run.
However, this makes it easy to accidentally cause unnecessary renders, making the app slow. Even production apps with hundreds of engineers can't fully optimize their apps (see GitHub, Twitter, and Instagram).
<ExpensiveComponent onClick={() => alert("hi")} style={{ color: "purple" }} />
React Scan helps you identify these issues by automatically detecting and highlighting renders that cause performance issues.
Want to try it out? Check the demo.
Looking to contribute? Check the Contributing Guide.
Want to talk to the community? Join our Discord.
Find a bug? Head to our issue tracker.
→ Start contributing on GitHub
React Scan is MIT-licensed open-source software by Aiden Bai, Million Software, Inc., and contributors.