aidenybai/react-scan

これは何？

主な機能

• 01ページ上で不要な再レンダリングが発生しているコンポーネントをハイライトする
• 02scriptタグで追加すれば、コードの変更は不要
• 03レンダリングを確認できるページ上のツールバーを提供する
• 04プログラムから操作するためのscan、useScan、setOptions APIを提供する
• 05onRenderを使って特定のコンポーネントのレンダリングを監視できる
• 06ブラウザー拡張機能と、各種フレームワークの導入ガイドを提供する

ユースケース

• 動作が遅いReactのシングルページアプリで、無駄な再レンダリングを見つける
• 開発中に、状態変更後にどのコンポーネントが再レンダリングされるか確認する
• Next.jsやRemixのプロジェクトで、不要なレンダリング処理がないか調べる
• onRenderフックを使って、単一のコンポーネントのレンダリングを追跡する

クイックスタート

1. 1

   init コマンドを実行してフレームワークを自動検出し、React Scan をセットアップします

   npx -y react-scan@latest init
2. 2

   または、npm 経由でパッケージを手動インストールします

   npm install -D react-scan
3. 3

   アプリに script タグを追加します（例: index.html 内の、他のスクリプトより前）

使う前に知っておきたいこと

• !README では後継として React Doctor が推奨されているため、React Scan の開発があまり活発でなくなる可能性があります。
• !手動セットアップでは script タグまたはフレームワーク固有のコードを追加する必要があり、スクリプトは unpkg.com から読み込まれます。

トピック

よくある質問

react-scan とは？

コードを変更せずに、不要な再レンダリングを引き起こすコンポーネントを自動検出してハイライトするReactパフォーマンスツール。 React Scanはレンダリングを監視し、不要な再レンダリングが発生しているコンポーネントをハイライトすることで、Reactアプリケーションのパフォーマンス問題を見つけます。scriptタグ1つ、またはnpmパッケージで導入できるため、アプリケーションのコードを変更せずに使えます。

react-scan は無料で使えますか？ライセンスは？

react-scan は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

react-scan は今もメンテナンスされていますか？

半年以内に更新あり。react-scan の最終コミットは 2026年8月16日 です。

react-scan は何に使えますか？

動作が遅いReactのシングルページアプリで、無駄な再レンダリングを見つける 開発中に、状態変更後にどのコンポーネントが再レンダリングされるか確認する Next.jsやRemixのプロジェクトで、不要なレンダリング処理がないか調べる onRenderフックを使って、単一のコンポーネントのレンダリングを追跡する

react-scan のインストール方法は？

init コマンドを実行してフレームワークを自動検出し、React Scan をセットアップします: npx -y react-scan@latest init または、npm 経由でパッケージを手動インストールします: npm install -D react-scan アプリに script タグを追加します（例: index.html 内の、他のスクリプトより前）

react-scan はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/aidenybai/react-scan