React メモ化チェッカー

React アプリケーションのパフォーマンス最適化を支援するスキル。コンポーネントが不要に再レンダリングされていないか、コールバックや計算値がメモ化されているかを検査します。

このスキルは以下の場合に使用してください

• •React コンポーネントファイルのパフォーマンス最適化を検討している
• •メモ化されていない箇所の特定と修正案が必要
• •useCallback、useMemo、React.memo の適切な使用箇所を知りたい

チェック対象

1. コンポーネント定義

• •React.memo でラップすべき関数コンポーネント（頻繁に再レンダリングされるコンポーネント）
• •memo を使用しても効果がない理由の診断

2. コールバック関数

• •useCallback でメモ化すべきハンドラ関数
• •子コンポーネントへの props として渡されるコールバック

3. 計算値

• •useMemo でメモ化すべき計算結果
• •派生状態（derived state）の処理

4. 依存配列

• •依存配列の欠落または不正確な依存関係
• •不要な依存関係による過度なメモ化

分析プロセス

1. •コード読み取り - React コンポーネントコードを分析
2. •パターン検出 - メモ化の必要性があるパターンを特定
3. •リスク評価 - 不要な再レンダリングの可能性を評価
4. •修正提案 - コード例付きの改善案を提示
5. •説明 - 各修正の理由と期待される効果を説明

修正案の形式

// ❌ 修正前
function ComponentName(props) {
  // メモ化されていない処理
}

// ✅ 修正後
const ComponentName = React.memo(function ComponentName(props) {
  // メモ化された処理
});

修正案には以下を含めます：

• •変更箇所のハイライト
• •修正の理由
• •期待される改善効果（「子コンポーネントの不要な再レンダリング防止」など）
• •注意点（カスタムコンパレータが必要な場合など）

参考資料

詳細なメモ化パターンと検出ロジックは references/memoization-patterns.md を参照してください。