react-scan README

The project's README from github.com/aidenybai/react-scan. As one markdown file: README.md.

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 →

React Scan automatically detects performance issues in your React app.

Quick Start

npx -y react-scan@latest init

Try out a demo! →

React Scan in action

Install

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

npx -y react-scan@latest init

Manual Installation

Install the package:

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:

<!-- 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:

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:

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:

<!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:

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

Browser Extension

Install the extension by following the guide here.

API Reference

Options 
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;
}

Why React Scan?

React 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.

Resources & Contributing

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

Acknowledgments

License

React Scan is MIT-licensed open-source software by Aiden Bai, Million Software, Inc., and contributors.

react-scan (aidenybai/react-scan)

Searching Database…

21.9K ·GitHub
React-scan
这是什么？React Scan 是一款开发工具，能自动检测 React 应用中的性能问题：它会精确标出你需要优化的组件，不需要改任何代码，还可以通过页面上的工具栏随时使用。
它是装到我项目里的东西，还是一个独立的应用？两者都是：它既是一个 npm 包，可以通过 script 标签放进你的应用；也有独立的浏览器扩展，如果你不想动代码，可以直接用扩展。
把它加到我的应用里，最快的方法是什么？在项目里运行 init 命令：它会自动识别你的框架、通过 npm 安装 react-scan，并把一切配置好。手动方式则是自己安装这个包，再添加它的 script 标签。
它能配合 Next.js 这类框架使用吗？可以——针对 Next.js（App Router）和 Remix 都有可直接复制的接入指南，任何 index.html 也都能用普通的 script 标签接入；init 命令同样会自动识别你的框架。
我还应该用它吗，还是已经有别的东西取代它了？它仍然可用，也依然是开源项目，不过 README 现在引导用户去用 React Doctor——它把性能分析能力带给了编码智能体，还新增了针对架构、安全和无障碍的静态检查。
在我自己的项目里使用它免费吗？免费——React Scan 是由 Aiden Bai、Million Software, Inc. 和贡献者们开发的 MIT 许可开源软件。
在它看来，React 应用到底为什么会变慢？因为组件的 props 是按引用而不是按值来比较的，很容易触发不必要的重新渲染——React Scan 标出的正是这些。即使是拥有数百名工程师的生产级应用（文中提到了 GitHub、Twitter、Instagram）也无法做到完全优化。
我能从自己的代码里监控渲染吗？可以——API 里有用来启动扫描的 scan() 和 useScan() 钩子，运行时控制用的 setOptions()/getOptions()，还有 onRender()，可以在某个特定组件渲染时执行回调。
它的灵感来自哪里？来自 React Devtools 的高亮渲染的最初想法、Million Lint 的扫描与代码检查思路，以及 Why Did You Render? 的检测不必要渲染的概念。
我能不安装任何东西就先试试吗？可以——README 里链接了一个在线演示，在把它加进你的应用之前，你可以先看看渲染高亮的效果。
What are similar projects?million, vConsole, redux-devtools-extension, devtools-v6, redux-devtools, web-source-inspect, zustand, react-grab
Which topics is it in?profiler, devtools, optimization, debugging, rendering, browser-extension, nextjs, web-development, performance, react, npm, frontend
Creator
aidenybai
Size
43.9 MB
Stars
21.9K
Updated
CommitAug 16Releasev0.4.3Jun 29
Age
2y
Commits · 90 Days