react-performance

React パフォーマンススキル

このスキルは、React のレンダリング、バンドルサイズ、Web Vitals、リストのパフォーマンス、画像・メディアの読み込み、状態の配置、応答性を診断・改善し、変更前後の測定可能な根拠を示すために使用します。

このスキルを使う場面

ユーザーがフロントマターのトリガーで対象となるタスクを依頼した場合に使用してください。特に、この分野の実装ガイダンス、デバッグ、アーキテクチャの選択、本番環境向けの強化、パフォーマンスを重視した判断が対象です。まずこのオーケストレーターから始め、依頼された詳細度に合うリファレンスファイルを読み込んでください。

基本的なワークフロー

1. コードを変更する前に、React DevTools Profiler、Web Vitals、ブラウザーのパフォーマンスツール、またはバンドルアナライザーで測定します。
2. ボトルネックの種類を特定します。不要な再レンダリング、高コストな計算、大規模なリスト、大きなバンドル、応答の遅い操作、画像・メディアの読み込み、または高すぎる階層に配置された状態が該当します。
3. 状態の近接配置、コンポジション、メモ化、仮想化、遅延読み込み、動的インポート、または並行レンダリング API を使い、対象を絞った最小限の修正を適用します。
4. メディアを多用する UI では、video 要素の同一性を保ち、再マウントを避け、命令的な制御には ref を使い、IntersectionObserver でソースを遅延読み込みします。
5. 変更のたびに再測定し、所要時間、Web Vitals、メモリ、デコーダーの再生成、またはバンドルサイズの改善につながる最適化だけを残します。

主な注意点

• メモ化にはオーバーヘッドがあります。React.memo、useMemo、useCallback は、測定で確認したホットスポットや props の安定した境界に対して使用し、あらゆる箇所で使わないでください。
• カスタムの React.memo 比較関数で大きな構造をディープイコールすると、レンダリングより処理が遅くなる場合があります。
• フィルターや並べ替えを行うリストでインデックスをキーに使うと、特に video 要素でコストの高い再マウントや状態の消失が発生することがあります。
• video 要素はブラウザー内の状態を持つリソースです。再マウントすると、ハードウェアデコーダーやバッファー済みの再生状態が失われることがあります。
• 並行機能は応答性を改善しますが、高コストな処理自体をなくすものではありません。緊急性の低い処理をスケジュールします。

リファレンス一覧

• references/react-performance-complete-guide.md - 測定、メモ化、コード分割、仮想化、レンダリングの回避、並行機能、画像、バンドル、メディア要素、デコーダープール、モバイル動画のパフォーマンスを網羅した、元のガイド全体です。
• references/virtualization-guide.md - このスキル用にすでに整備されている、仮想化リストの詳細ガイドです。

応答に関するガイダンス

• 明確な互換性上またはパフォーマンス上の理由から別の選択肢を提案する場合を除き、ユーザーが既存のフレームワーク、ライブラリ、ツールを使い続けられるようにしてください。
• コピーしてそのまま使えるコードを提示するのは、依頼されたタスクに厳密に合致する場合だけにしてください。それ以外の場合は、該当するリファレンスのセクションを案内してください。
• 本番環境のワークフローでは、トレードオフ、失敗につながる要因、検証手順を明示してください。
• 巧妙なマイクロ最適化より、アクセシブルで保守しやすく、効果を測定できる解決策を優先してください。