React パフォーマンストラック
React パフォーマンストラック (React Performance track) は、ブラウザの開発者ツールにあるパフォーマンスパネルのタイムラインに表示される特別なカスタムエントリです。
これらのトラックは、ネットワークリクエスト、JavaScript の実行、イベントループのアクティビティなど、他の重要なデータソースと並べて React 固有のイベントやメトリクスを可視化することで、React アプリケーションのパフォーマンスに関する包括的な情報を開発者に提供するように設計されています。これらはすべてパフォーマンスパネル内の統一されたタイムラインで同期され、アプリケーションの動作の全体像を把握できるようになります。
使用法
React パフォーマンストラックは、開発用ビルドおよびプロファイリングビルドの React でのみ使用できます。
- 開発用：デフォルトで有効になっています。
- プロファイリング：Scheduler トラックのみがデフォルトで有効になっています。コンポーネントトラックには、
<Profiler>でラップされたサブツリー内のコンポーネントのみが表示されます。React Developer Tools 拡張機能が有効になっている場合、<Profiler>でラップされていないコンポーネントもコンポーネントトラックに含まれます。サーバトラックはプロファイリングビルドでは利用できません。
有効になっている場合、拡張 API を提供するブラウザのパフォーマンスパネルで記録したトレースに、トラックが自動的に表示されます。
プロファイリングビルドの使用
本番用ビルドと開発用ビルドに加えて、React には特別なプロファイリングビルドが含まれています。
プロファイリングビルドを使用するには、react-dom/client の代わりに react-dom/profiling を使用する必要があります。
各 react-dom/client のインポートを手動で更新するのではなく、バンドラのエイリアス機能を使ってビルド時に react-dom/client を react-dom/profiling にエイリアスすることをお勧めします。
使用しているフレームワークによっては、React のプロファイリングビルドを有効にするための組み込みサポートがある場合があります。
トラック
Scheduler
Scheduler は、異なる優先度を持つタスクを管理するために使用される React の内部概念です。このトラックは 4 つのサブトラックで構成され、それぞれが特定の優先度の作業を表しています。
- Blocking - ユーザ操作によって開始された可能性のある同期更新です。
- Transition - 通常は
startTransition経由で開始される、バックグラウンドで行われる非ブロッキング作業です。 - Suspense - フォールバックの表示やコンテンツの表示など、Suspense バウンダリに関連する作業です。
- Idle - より高い優先度のタスクがない場合に行われる最も低い優先度の作業です。
レンダー
各レンダーパスは、タイムラインで確認できる複数のフェーズで構成されています。
- Update - 新しいレンダーパスのきっかけとなったものです。
- Render - React がコンポーネントのレンダー関数を呼び出し、更新されたサブツリーをレンダーします。レンダーされたコンポーネントのサブツリーはコンポーネントトラックで確認でき、同じ配色が使われます。
- Commit - コンポーネントをレンダーした後、React は変更を DOM に反映し、
useLayoutEffectのようなレイアウトエフェクトを実行します。 - Remaining Effects - React はレンダーされたサブツリーのパッシブエフェクトを実行します。これは通常ペイント後に行われ、
useEffectのようなフックが実行されるタイミングです。既知の例外はクリックなどのユーザ操作やその他の離散的なイベントであり、この場合、このフェーズはペイントの前に実行される可能性があります。
カスケード更新
カスケード更新は、パフォーマンスの低下を引き起こすパターンの 1 つです。レンダーパス中に更新がスケジュールされた場合、React は完了した作業を破棄して新しいレンダーパスを開始する可能性があります。
開発用ビルドでは、React はどのコンポーネントが新しい更新をスケジュールしたかを表示できます。これには一般的な更新とカスケード更新の両方が含まれます。“Cascading update” エントリをクリックすると、拡張されたスタックトレースが表示され、更新をスケジュールしたメソッドの名前も確認できます。
Components
コンポーネントトラックは、React コンポーネントの継続時間を可視化します。フレームグラフとして表示され、各エントリは対応するコンポーネントのレンダーとすべての子孫コンポーネントの継続時間を表します。
エフェクトの継続時間もレンダーの継続時間と同様に、フレームグラフとして表示されますが、Scheduler トラック上の対応するフェーズに合わせて配色が異なります。
レンダーとエフェクトのフェーズ中に、追加のイベントが表示される場合があります。
- Mount - コンポーネントのレンダーまたはエフェクトの対応するサブツリーがマウントされました。
- Unmount - コンポーネントのレンダーまたはエフェクトの対応するサブツリーがアンマウントされました。
- Reconnect - Mount と似ていますが、
<Activity>が使用されている場合に限定されます。 - Disconnect - Unmount と似ていますが、
<Activity>が使用されている場合に限定されます。
props の変更追跡
開発用ビルドでは、コンポーネントのレンダーエントリをクリックすると、props の潜在的な変更を検査できます。この情報を利用して、不要なレンダーを特定できます。
Server
Server Requests
サーバリクエストトラックは、最終的に React Server Component 内で使われるすべてのプロミス (Promise) を可視化します。これには、fetch の呼び出しや非同期 Node.js ファイル操作などの async 操作が含まれます。
React は、サードパーティのコードから開始されたプロミスを、ファーストパーティコードをブロックする操作全体の継続時間を表す単一のスパンに結合しようとします。
例えば、内部的に複数回 fetch を呼び出す getUser というサードパーティライブラリのメソッドは、複数の fetch スパンを表示するのではなく、getUser という単一のスパンとして表されます。
スパンをクリックすると、プロミスが作成された場所のスタックトレースと、利用可能な場合はプロミスが解決した値のビューが表示されます。
拒否されたプロミスは、拒否された値とともに赤色で表示されます。
Server Components
サーバコンポーネントトラックは、React Server Components と、それらが待機したプロミスの所要時間を可視化します。タイミングはフレームグラフとして表示され、各エントリは対応するコンポーネントのレンダーとすべての子孫コンポーネントの所要時間を表します。
プロミスを待機する場合、React はそのプロミスの継続時間を表示します。すべての I/O 操作を確認するには、サーバリクエストトラックを使用してください。
コンポーネントのレンダーの継続時間を示すために異なる色が使用されます。色が濃いほど、継続時間が長いことを示します。
サーバコンポーネントトラックグループには、常に “Primary” トラックが含まれます。React がサーバコンポーネントを並行してレンダーできる場合、追加の “Parallel” トラックが表示されます。 8 つを超えるサーバコンポーネントが並行してレンダーされる場合、React はさらにトラックを追加するのではなく、最後の “Parallel” トラックに関連付けます。