[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3716":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},3716,"react-scan","aidenybai\u002Freact-scan","aidenybai","Scan and fix React performance issues","https:\u002F\u002Freact-scan.com",null,"TypeScript",21362,370,40,32,0,3,23,119,12,42.71,"MIT License",false,"main",[26,27,28,5,29],"javascript","react","react-dom","rendering","2026-06-12 02:00:53","# \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-scan\u002Fblob\u002Fmain\u002F.github\u002Fassets\u002Flogo.svg\" width=\"30\" height=\"30\" align=\"center\" \u002F> React Scan\n\nReact Scan automatically detects performance issues in your React app.\n\n- Requires no code changes -- just drop it in\n- Highlights exactly the components you need to optimize\n- Always accessible through a toolbar on page\n\n### Quick Start\n\n```bash\nnpx -y react-scan@latest init\n```\n\n### [**Try out a demo! →**](https:\u002F\u002Freact-scan.million.dev)\n\u003Cimg\n  src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fc21b3afd-c7e8-458a-a760-9a027be7dc02\"\n  alt=\"React Scan in action\"\n  width=\"600\"\n\u002F>\n\n## Install\n\nThe `init` command will automatically detect your framework, install `react-scan` via npm, and set up your project.\n\n```bash\nnpx -y react-scan@latest init\n```\n\n### Manual Installation\n\nInstall the package:\n\n```bash\nnpm install -D react-scan\n```\n\nThen add the script tag to your app. Pick the guide for your framework:\n\n#### Script Tag\n\nPaste this before any scripts in your `index.html`:\n\n```html\n\u003C!-- paste this BEFORE any scripts -->\n\u003Cscript\n  crossOrigin=\"anonymous\"\n  src=\"\u002F\u002Funpkg.com\u002Freact-scan\u002Fdist\u002Fauto.global.js\"\n>\u003C\u002Fscript>\n```\n\n#### Next.js (App Router)\n\nAdd this inside of your `app\u002Flayout.tsx`:\n\n```tsx\nimport Script from \"next\u002Fscript\";\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003Chtml>\n      \u003Chead>\n        \u003CScript\n          src=\"\u002F\u002Funpkg.com\u002Freact-scan\u002Fdist\u002Fauto.global.js\"\n          crossOrigin=\"anonymous\"\n          strategy=\"beforeInteractive\"\n        \u002F>\n      \u003C\u002Fhead>\n      \u003Cbody>{children}\u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  );\n}\n```\n\n#### Next.js (Pages Router)\n\nAdd this into your `pages\u002F_document.tsx`:\n\n```tsx\nimport { Html, Head, Main, NextScript } from \"next\u002Fdocument\";\nimport Script from \"next\u002Fscript\";\n\nexport default function Document() {\n  return (\n    \u003CHtml lang=\"en\">\n      \u003CHead>\n        \u003CScript\n          src=\"\u002F\u002Funpkg.com\u002Freact-scan\u002Fdist\u002Fauto.global.js\"\n          crossOrigin=\"anonymous\"\n          strategy=\"beforeInteractive\"\n        \u002F>\n      \u003C\u002FHead>\n      \u003Cbody>\n        \u003CMain \u002F>\n        \u003CNextScript \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002FHtml>\n  );\n}\n```\n\n#### Vite\n\nExample `index.html` with React Scan enabled:\n\n```html\n\u003C!doctype html>\n\u003Chtml lang=\"en\">\n  \u003Chead>\n    \u003Cscript\n      crossOrigin=\"anonymous\"\n      src=\"\u002F\u002Funpkg.com\u002Freact-scan\u002Fdist\u002Fauto.global.js\"\n    >\u003C\u002Fscript>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cdiv id=\"root\">\u003C\u002Fdiv>\n    \u003Cscript type=\"module\" src=\"\u002Fsrc\u002Fmain.tsx\">\u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n#### Remix\n\nAdd this inside your `app\u002Froot.tsx`:\n\n```tsx\nimport { Links, Meta, Outlet, Scripts } from \"@remix-run\u002Freact\";\n\nexport default function App() {\n  return (\n    \u003Chtml>\n      \u003Chead>\n        \u003CMeta \u002F>\n        \u003Cscript\n          crossOrigin=\"anonymous\"\n          src=\"\u002F\u002Funpkg.com\u002Freact-scan\u002Fdist\u002Fauto.global.js\"\n        \u002F>\n        \u003CLinks \u002F>\n      \u003C\u002Fhead>\n      \u003Cbody>\n        \u003COutlet \u002F>\n        \u003CScripts \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  );\n}\n```\n\n### Browser Extension\n\nInstall the extension by following the guide [here](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-scan\u002Fblob\u002Fmain\u002FBROWSER_EXTENSION_GUIDE.md).\n\n## API Reference\n\n\u003Cdetails>\n\u003Csummary>\u003Ccode>Options\u003C\u002Fcode>\u003C\u002Fsummary>\n\n\u003Cbr \u002F>\n\n```tsx\nexport interface Options {\n  \u002F**\n   * Enable\u002Fdisable scanning\n   * @default true\n   *\u002F\n  enabled?: boolean;\n\n  \u002F**\n   * Force React Scan to run in production (not recommended)\n   * @default false\n   *\u002F\n  dangerouslyForceRunInProduction?: boolean;\n\n  \u002F**\n   * Log renders to the console\n   * @default false\n   *\u002F\n  log?: boolean;\n\n  \u002F**\n   * Show toolbar bar\n   * @default true\n   *\u002F\n  showToolbar?: boolean;\n\n  \u002F**\n   * Animation speed\n   * @default \"fast\"\n   *\u002F\n  animationSpeed?: \"slow\" | \"fast\" | \"off\";\n\n  onCommitStart?: () => void;\n  onRender?: (fiber: Fiber, renders: Array\u003CRender>) => void;\n  onCommitFinish?: () => void;\n}\n```\n\n\u003C\u002Fdetails>\n\n- `scan(options: Options)`: Imperative API to start scanning\n- `useScan(options: Options)`: Hook API to start scanning\n- `setOptions(options: Options): void`: Set options at runtime\n- `getOptions()`: Get the current options\n- `onRender(Component, onRender: (fiber: Fiber, render: Render) => void)`: Hook into a specific component's renders\n\n## Why React Scan?\n\nReact can be tricky to optimize.\n\nThe issue is that component props are compared by reference, not value. This is intentional -- rendering can be cheap to run.\n\nHowever, 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](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-scan\u002Fblob\u002Fmain\u002F.github\u002Fassets\u002Fgithub.mp4), [Twitter](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-scan\u002Fblob\u002Fmain\u002F.github\u002Fassets\u002Ftwitter.mp4), and [Instagram](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-scan\u002Fblob\u002Fmain\u002F.github\u002Fassets\u002Finstagram.mp4)).\n\n```jsx\n\u003CExpensiveComponent onClick={() => alert(\"hi\")} style={{ color: \"purple\" }} \u002F>\n```\n\nReact Scan helps you identify these issues by automatically detecting and highlighting renders that cause performance issues.\n\n## Resources & Contributing\n\nWant to try it out? Check the [demo](https:\u002F\u002Freact-scan.million.dev).\n\nLooking to contribute? Check the [Contributing Guide](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-scan\u002Fblob\u002Fmain\u002FCONTRIBUTING.md).\n\nWant to talk to the community? Join our [Discord](https:\u002F\u002Fdiscord.gg\u002FX9yFbcV2rF).\n\nFind a bug? Head to our [issue tracker](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-scan\u002Fissues).\n\n[**→ Start contributing on GitHub**](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-scan\u002Fblob\u002Fmain\u002FCONTRIBUTING.md)\n\n## Acknowledgments\n\n- [React Devtools](https:\u002F\u002Freact.dev\u002Flearn\u002Freact-developer-tools) for the initial idea of highlighting renders\n- [Million Lint](https:\u002F\u002Fmillion.dev) for scanning and linting approaches\n- [Why Did You Render?](https:\u002F\u002Fgithub.com\u002Fwelldone-software\u002Fwhy-did-you-render) for the concept of detecting unnecessary renders\n\n## License\n\nReact Scan is [MIT-licensed](LICENSE) open-source software by Aiden Bai, [Million Software, Inc.](https:\u002F\u002Fmillion.dev), and [contributors](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-scan\u002Fgraphs\u002Fcontributors).\n","React Scan 是一个用于检测和优化 React 应用性能问题的工具。它能够自动识别应用中的性能瓶颈，特别是渲染速度慢的问题，并通过页面上的工具栏直观地指出需要优化的具体组件，无需对现有代码进行任何修改即可使用。该工具基于 TypeScript 开发，支持多种流行的前端框架如 Next.js、Vite 和 Remix 等，适用于希望提高用户体验或解决复杂 React 应用性能瓶颈的开发者。通过简单的安装命令或手动配置，用户可以快速集成 React Scan 到项目中，从而有效提升应用的整体响应速度与流畅度。",2,"2026-06-11 02:55:47","top_language"]