React Profilerで「勘」のパフォーマンスチューニングを卒業する
現場で開発をしていると、必ず一度はぶつかる壁がある。「なぜか画面の描画がもっさりする」「ボタンクリックのレスポンスが悪い」。そんな時、多くのエンジニアがやりがちなのが、`useMemo`や`useCallback`を闇雲に散りばめることだ。
だが、言わせてほしい。計測なき最適化は、ただの「推測」だ。
Reactは非常に優秀だが、その裏側で何が起きているかを知らずに手探りで修正するのは、目隠しをして迷路を走るようなものだ。今日は、React標準の「Profiler API」を使って、ボトルネックを科学的に特定し、迷いのない最適化を行うための極意を伝授しよう。
—
Profiler APIが教えてくれる「真実」
Reactの`Profiler`コンポーネントは、ラップしたツリーのレンダリング時間をミリ秒単位で計測してくれるツールだ。ブラウザのDevToolsで見る「React Profiler」タブも便利だが、プロダクションに近い環境で「どのコンポーネントが何回、なぜ再レンダリングされたのか」を追跡するには、`onRender`コールバックが不可欠だ。
実務で使う `Profiler` の基本形
まずは、特定のコンポーネントツリーを囲むだけで計測が始まる、最もシンプルな実装を見てみよう。
import React, { Profiler } from ‘react’;
const MyPerformanceCriticalComponent = () => {
// 計測用のコールバック関数
// id: ProfilerのID, phase: ‘mount’ または ‘update’
const onRenderCallback = (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
// 開発現場ではここをログに出すだけでなく、DatadogやNew Relicなどの
// RUM（Real User Monitoring）ツールに飛ばすのが定石だ
console.log(`[Profiler: ${id}] phase: ${phase}, duration: ${actualDuration.toFixed(2)}ms`);
// actualDurationが特定の閾値（例えば16ms以上＝60fpsを割るライン）を超えたら警告を出すなど
if (actualDuration > 16) {
console.warn(`⚠️ パフォーマンス低下検知: ${id} が ${actualDuration}ms かかっています`);
}
};
return (
);
};
—
なぜレンダリング時間は「跳ね上がる」のか？
`onRender`で取得できる `actualDuration` が跳ね上がる原因は、大きく分けて二つある。
1. レンダリング回数の爆発: 親コンポーネントのState変更が、本来再レンダリング不要な子コンポーネントまで波及している（`React.memo`の欠如）。
2. 計算負荷の増大: レンダーフェーズ中に重いJSの計算（配列のフィルタリングやソートなど）が走っている。
ここで重要なのは、「何が原因でレンダリングがトリガーされたか」を把握することだ。
現場で役立つ「差分計測」のテクニック
ただ計測するだけでは不十分だ。私は現場で、`useRef`を併用して「前回のレンダリング時との差分」を記録する手法をよく使う。特に複雑なダッシュボードを作っている時は、これが最強のデバッグツールになる。
import { Profiler, useRef } from ‘react’;
const PerformanceTracker = ({ children }) => {
const renderCount = useRef(0);
const onRender = (id, phase, actualDuration) => {
renderCount.current++;
// レンダリング回数が多すぎるコンポーネントを特定する
if (renderCount.current > 5) {
console.debug(`[${id}] レンダリングが5回を超えました。不要な再レンダリングを疑ってください。`);
}
};
return (
{children}
);
};
—
シニアからのアドバイス：最適化の「引き際」を見極めろ
ここまでProfilerの使い方を説明したが、最後に一つだけ、釘を刺しておきたい。
「すべてのコンポーネントをProfilerで囲めばいい」というわけではない。
過剰な計測コードは、それ自体がメモリを食い、実行時の負荷になる。Profilerは、あくまで「疑わしい箇所」にピンポイントで当てるものだ。まずはブラウザのReact DevToolsで、「Highlight updates when components render」をONにして、見た目で明らかに「おかしい動き（不要な光り方）」をしている箇所を探せ。
その上で、Profilerを使って定量的な裏付けを取る。この手順を踏めば、君のプルリクエストは誰からも文句の出ない、説得力のあるものになるはずだ。
パフォーマンスチューニングは、いわば「外科手術」だ。正確な診断なくしてメスを入れるな。まずはProfilerで、君のアプリケーションの「心拍数」を正しく計測するところから始めてみてほしい。
何かあれば、いつでも聞いてくれ。現場の泥臭い課題こそ、Reactを極める最短ルートだからな。
コメント