<Profiler>

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

• リファレンス
  • <Profiler>
  • onRender コールバック
• 使用法
  • レンダー�?パフォーマンスをプログラムで測�?�する
  • アプリケーション�?複数部位を測�?�する

リファレンス

<Profiler>

コンポーネントツリーを <Profiler> でラップすることで、レンダー�?パフォーマンスを測�?�することができます。

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

props

• id: UI �?ど�?部分を測�?�対象としている�?か識別するため�?文字列です。
• onRender: プロファイリング対象�?ツリー内�?コンポーネントが更新されるたびに React が呼び出す onRender コールバック。何がレンダーされ、それにどれだけ�?時間がかかったかについて�?情報を受け取ります。

注意点

• プロファイリングには追加�?オーバーヘッドが発生するため、デフォルトでは本番用ビルドでは無効になっています。本番環境でプロファイリングを行うためには、プロファイリングを有効にしたな特別な本番用ビルドを明示的に用いる必要があります。

onRender コールバック

React は onRender コールバックを呼び出して、何がレンダーされたかについて�?情報を伝えます。

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // Aggregate or log render timings...
}

引数

• id: たった今コミットされたツリーに対応する <Profiler> �? id プロパティ。複数�?プロファイラを使用している場合に、ど�?ツリーがコミットされたかをこれにより識別できます。
• phase: "mount"、"update"、または "nested-update"。これにより、ツリーが初めてマウントされた�?か、props、state、またはフック�?変更により再レンダーされた�?かを知ることができます。
• actualDuration: 現在�?更新�?ために <Profiler> とそ�?子要素がレンダーに費やしたミリ秒数。これは、サブツリーがメモ化（例：memo と useMemo）をどれだけうまく利用できているかを示すも�?です。理想的には、子要素�?多くが自身�? props が変更された場合に�?み再レンダーされるようになることで、こ�?値は初回マウント後に大幅に減少していくはずです。
• baseDuration: もし最適化なしで <Profiler> サブツリー全体を再レンダーした場合にかかる時間をミリ秒で推�?�した数値。ツリー内�?各コンポーネント�?最後�?レンダーにかかった時間を合計することで計�?�されます。こ�?値は、最悪�?ツリー�?レンダーコスト（例：初回マウントやメモ化がない場合）を推�?�します。メモ化が機能しているかどうかを確認するには、こ�?値を actualDuration と比較します。
• startTime: React が現在�?更新�?レンダーを開始した時刻�?タイムスタンプ。
• commitTime: React が現在�?更新をコミットした時刻�?タイムスタンプ。こ�?値は単一コミット内�?すべて�?プロファイラ間で共有されるため、必要に応じてグループ化するために利用できます。

使用法

レンダー�?パフォーマンスをプログラムで測�?�する

React ツリーを <Profiler> コンポーネントで囲むことで、そ�?レンダー�?パフォーマンスを測�?�します。

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <PageContent />
</App>

id（文字列）と onRender コールバック（関数）�? 2 つ�? props が必要です。React はツリー内�?コンポーネントが更新を「コミット」するたびにこれを呼び出します。

アプリケーション�?複数部位を測�?�する

アプリケーション�?複数�?部位を測�?�するために、複数�? <Profiler> コンポーネントを使用することができます。

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content />
  </Profiler>
</App>

また、<Profiler> コンポーネントをネストすることもできます。

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content>
      <Profiler id="Editor" onRender={onRender}>
        <Editor />
      </Profiler>
      <Preview />
    </Content>
  </Profiler>
</App>

<Profiler> は軽量なコンポーネントですが、必要な場合に�?み使用するべきです。使用するたびにアプリケーションに一�?��? CPU とメモリ�?オーバーヘッドが生じます。