react-performance

React のパフォーマンス

概要

React アプリケーション向けの、パフォーマンス最適化に特化したスキルです。ビルド時の最適化（コード分割、バレルファイルの回避）から、実行時の手法（メモ化、トランジション、content-visibility）、診断ツール（React DevTools Profiler、バンドルアナライザー）まで、幅広く扱います。

使用する場面： Time to Interactive の短縮、バンドルサイズの縮小、再レンダリングの解消、遅いコンポーネントのプロファイリング、大規模なリストの最適化、重い依存関係の遅延読み込み、React アプリのパフォーマンス監査。

使用しない場面： 一般的な React コンポーネントのパターン（react-patterns スキルを使用）、Next.js のキャッシュなどフレームワーク固有の最適化（フレームワークスキルを使用）、React 以外のパフォーマンス（ネットワーク、データベース、CDN）。

クイックリファレンス

カテゴリ	手法	要点
コンパイラー	React Compiler	ビルド時に自動でメモ化し、手動の memo/useMemo/useCallback を不要にします
メモ化	React.memo(Component)	頻繁に再レンダリングされる親から、安定したプリミティブな props を受け取るコンポーネントをラップします
メモ化	useMemo(fn, deps)	ソート、フィルタリング、Set/Map の構築など、コストの高い計算にのみ使用します
メモ化	useCallback(fn, deps)	メモ化された子に渡す場合にのみ使用します。安定した参照には関数型 setState を使用します
分割	React.lazy(() => import())	<Suspense> フォールバックを使って、重いコンポーネントを遅延読み込みします
分割	意図に応じたプリロード	ホバー／フォーカス時に import() を実行し、体感速度を高めます
バンドル	直接インポート	バレルファイルを避け、特定のパスからインポートしてモジュール数を減らします
バンドル	サードパーティの読み込みを遅らせる	ハイドレーション後に分析ツールやロギングを読み込みます
再レンダリング	startTransition	緊急性の低い更新（検索、スクロール追跡）を中断可能として扱います
再レンダリング	関数型 setState	setState(prev => ...) により、コールバックの state 依存をなくせます
再レンダリング	派生状態	継続的に変化する値ではなく真偽値を購読し、レンダー中に計算します
再レンダリング	状態の読み取りを遅らせる	動的な状態（searchParams）はレンダー時ではなく、コールバック内で読み取ります
レンダリング	content-visibility: auto	長いリストの画面外にある項目について、レイアウトと描画をスキップします
レンダリング	静的 JSX を外部に移動	定数の要素をコンポーネント関数の外に取り出します
プロファイリング	React DevTools Profiler	レンダリングを記録し、遅いコンポーネントを特定して、フレームグラフを分析します
プロファイリング	バンドルアナライザー	チャンクサイズを可視化し、サイズの大きい依存関係を見つけます

よくある間違い

間違い	正しいパターン
すべてを useMemo/useCallback でラップする	まず React Compiler を信頼します。コストの高い計算や、メモ化された子コンポーネントへのコールバックのみをメモ化します
value * 2 のような単純な処理をメモ化する	単純なプリミティブ値にはメモ化を使いません。オーバーヘッドが再計算のコストを上回ります
バレルファイル（lucide-react、@mui/material）からインポートする	特定のパスから直接インポートするか、optimizePackageImports を使用します
初期バンドルで分析／トラッキングを読み込む	lazy とマウント状態を使って、ハイドレーション後に読み込むよう遅延させます
ブール値の判定に連続的に変化する値（ウィンドウ幅）をサブスクライブする	useMediaQuery または派生ブール値を使用し、しきい値が変わったときだけ再レンダリングします
useCallback の依存配列で state を参照する	安定したコールバックには、関数形式の setState setState(prev => ...) を使用します
props から state を導出するために useEffect を使用する	レンダリング中に導出値を計算します。エフェクトを使うと余分なレンダリングサイクルが発生します
レンダリングのたびに新しいオブジェクトリテラルを props として作成する	静的なオブジェクトはコンポーネントの外に置き、動的なオブジェクトには useMemo を使用します
開発モードでプロファイリングする	常に本番ビルドをプロファイリングします。開発モードには結果を歪める追加の警告が含まれます

委任

• パフォーマンスのボトルネックをプロファイリングして診断する：Explore エージェントを使用して React DevTools Profiler を実行し、バンドルの構成を分析し、再レンダリングの連鎖を追跡します
• 既存コードにパフォーマンス最適化を適用する：Task エージェントを使用してコード分割を実装し、メモ化の境界を追加し、レンダリングを最適化します
• パフォーマンス改善戦略を計画する：Plan エージェントを使用して影響度（ウォーターフォール > バンドル > 再レンダリング）に基づいて最適化の優先順位を決め、最適化のロードマップを作成します

react-patterns スキルが利用可能な場合は、一般的なコンポーネントアーキテクチャや React 19 API に関する質問を同スキルに委任してください。 利用できない場合は、npx skills add oakoss/agent-skills --skill react-patterns を推奨してください。

参考資料

• レンダリングの最適化：memo、useMemo、useCallback、コンパイラー、再レンダリングの排除
• コード分割：React.lazy、Suspense、動的インポート、バンドルの最適化
• プロファイリングとデバッグ：DevTools、パフォーマンス測定、よくあるボトルネック