導入
Reactアプリケーションが肥大化してくると、ユーザーの操作に対して画面の反応が遅い、あるいは入力がカクつくといった現象が発生します。その主な原因は「不要な再レンダリング」です。React ProfilerとWhy Did You Renderを活用することで、どのコンポーネントが無駄にレンダリングされているかを可視化し、効率的なパフォーマンスチューニングを行うことが可能になります。本記事では、実務で即戦力となるプロファイリング手法を解説します。
基礎知識
Reactにおいて、コンポーネントが再レンダリングされる条件は「Propsの変更」「Stateの更新」「親コンポーネントの再レンダリング」の3点です。これらが意図しないタイミングで発生すると、仮想DOMの計算コストが増大し、ブラウザのメインスレッドを圧迫します。
React Profilerは、React DevToolsに含まれる標準ツールで、レンダリングの所要時間や回数を測定します。一方、Why Did You Render (WDYR)は、コンポーネントが「なぜ」再レンダリングされたのか（どのPropsが変更されたのか）をコンソールに詳細出力するライブラリです。
実装/解決策
まずは、開発環境においてWhy Did You Renderを導入し、レンダリングのトリガーを監視します。以下の手順で設定を行うことで、不要な再レンダリングを自動的に検知できます。
1. 必要なパッケージをインストール: `npm install @welldone-software/why-did-you-render –save-dev`
2. エントリーポイント（index.js等）で初期化処理を記述。
3. 監視したいコンポーネントに設定を追加。
サンプルプログラム
以下のコードは、ReactアプリケーションのルートでWDYRを有効にするための設定例です。
// index.js や App.js の最上部に記述
import React from ‘react’;
if (process.env.NODE_ENV === ‘development’) {
const whyDidYouRender = require(‘@welldone-software/why-did-you-render’);
whyDidYouRender(React, {
trackAllPureComponents: true, // React.memoを使用したコンポーネントを監視
});
}
// 監視対象のコンポーネント例
const ExpensiveComponent = ({ data }) => {
return
;
};
// 開発時に再レンダリングの理由をコンソールに出力させるためのフラグ設定
ExpensiveComponent.whyDidYouRender = true;
export default ExpensiveComponent;
応用・注意点
実務における注意点として、以下の3点を意識してください。
1. 本番環境への混入防止: WDYRは開発者向けのツールです。必ず`process.env.NODE_ENV === ‘development’`で囲み、バンドルサイズや本番のパフォーマンスに影響を与えないようにしましょう。
2. memoの乱用に注意: プロファイリング結果を見て「すべてのコンポーネントをmemo化する」のはアンチパターンです。比較コストが低い場合はそのままの方が高速なこともあります。あくまで「重い計算が行われている箇所」や「頻繁に更新されるリスト」を優先的に最適化してください。
3. 参照の不一致: 再レンダリングの多くは、親コンポーネントで定義された関数が毎回新しいインスタンスとして生成され、子コンポーネントに渡されていることが原因です。`useCallback`や`useMemo`を適切に使用し、参照の安定化を図るのが王道的な解決策です。
これらのツールを使いこなすことで、「なんとなく重い」という感覚的なデバッグから脱却し、エビデンスに基づいた高速化を実現しましょう。
コメント