react-scan

# <img src="https://github.com/aidenybai/react-scan/blob/main/.github/assets/logo.svg" width="30" height="30" align="center" /> React Scan

> **You can still use React Scan, but we recommend React Doctor**
>
> React Doctor brings React Scan’s performance focus to coding agents, with static checks for architecture, security, accessibility, and more. [Try React Doctor →](https://react.doctor)

React Scan automatically detects performance issues in your React app.

- Requires no code changes -- just drop it in
- Highlights exactly the components you need to optimize
- Always accessible through a toolbar on page

### Quick Start

```bash
npx -y react-scan@latest init
```

### [**Try out a demo! →**](https://react-scan.million.dev)
<img
  src="https://github.com/user-attachments/assets/c21b3afd-c7e8-458a-a760-9a027be7dc02"
  alt="React Scan in action"
  width="600"
/>

## Install

The `init` command will automatically detect your framework, install `react-scan` via npm, and set up your project.

```bash
npx -y react-scan@latest init
```

### Manual Installation

Install the package:

```bash
npm install -D react-scan
```

Then add the script tag to your app. Pick the guide for your framework:

#### Script Tag

Paste this before any scripts in your `index.html`:

```html
<!-- paste this BEFORE any scripts -->
<script
  crossOrigin="anonymous"
  src="//unpkg.com/react-scan/dist/auto.global.js"
></script>
```

#### Next.js (App Router)

Add this inside of your `app/layout.tsx`:

```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>
  );
}
```

#### Next.js (Pages Router)

Add this into your `pages/_document.tsx`:

```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>
  );
}
```

#### Vite

Example `index.html` with React Scan enabled:

```html
<!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>
```

#### Remix

Add this inside your `app/root.tsx`:

```tsx
import { Links, Meta, Outlet, Scripts } from "@remix-run/react";

export default function App() {
  return (
    <html>
      <head>
        <Meta />
        <script
          crossOrigin="anonymous"
          src="//unpkg.com