APIリファレンス

... 削除しました。
コンポーネント

... 削除しました。

<Profiler>

... 削除しました。

<Profiler>を使用すると、Reactツリーのレンダリングパフォーマンスをプログラムで測定できます。

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

リファレンス

... 削除しました。

<Profiler>

... 削除しました。

レンダリングパフォーマンスを測定するには、コンポーネントツリーを<Profiler>でラップします。

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

プロパティ

... 削除しました。

  • 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"。ツリーが初めてマウントされたのか、プロパティ、状態、またはフックの変更により再レンダリングされたのかがわかります。
  • actualDuration: 現在の更新で <Profiler> とその子孫のレンダリングに費やされたミリ秒数です。この値は、サブツリーがメモ化（例：memo および useMemo）をどれだけうまく活用しているかを示します。理想的には、初回マウント後に多くの下位要素が特定のプロップの変更時にのみ再レンダリングする必要があるため、この値は大幅に減少するはずです。
  • baseDuration: 最適化なしで <Profiler> サブツリー全体を再レンダリングするのにかかる時間をミリ秒単位で見積もった数値です。ツリー内の各コンポーネントの最新のレンダリング時間を合計することで計算されます。この値は、レンダリングの最悪の場合のコスト（例：初回マウントまたはメモ化のないツリー）を見積もります。メモ化が機能しているかどうかを確認するには、actualDuration と比較してください。
  • startTime: React が現在の更新のレンダリングを開始した時刻の数値タイムスタンプです。
  • commitTime: React が現在の更新をコミットした時刻の数値タイムスタンプです。この値は、コミット内のすべてのプロファイラーで共有され、必要に応じてグループ化することができます。

使用方法

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

React ツリーのレンダリングパフォーマンスを測定するには、<Profiler> コンポーネントでラップします。

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

2 つのプロップが必要です。id（文字列）と、ツリー内のコンポーネントが更新を「コミット」するたびに React が呼び出す onRender コールバック（関数）です。

落とし穴

プロファイリングは追加のオーバーヘッドを追加するため、本番ビルドではデフォルトで無効になっています。本番プロファイリングをオプトインするには、プロファイリングが有効になっている特別な本番ビルドを有効にする必要があります。

注意

<Profiler> を使用すると、測定値をプログラムで収集できます。インタラクティブなプロファイラーを探している場合は、React Developer Tools の Profiler タブを試してください。ブラウザ拡張機能として同様の機能を提供します。

アプリケーションのさまざまな部分を測定する

複数の <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 とメモリのオーバーヘッドが追加されます。

<Fragment> (<>)<StrictMode>