React コンポーネントのメモ化されていない箇所を検出し、最適化の修正案を提示するスキル。useCallback、useMemo、React.memo の未使用箇所を分析し、パフォーマンス改善のアドバイスを提供します。
React アプリケーションのパフォーマンス最適化を支援するスキル。コンポーネントが不要に再レンダリングされていないか、コールバックや計算値がメモ化されているかを検査します。
React.memo でラップすべき関数コンポーネント(頻繁に再レンダリングされるコンポーネント)memo を使用しても効果がない理由の診断useCallback でメモ化すべきハンドラ関数useMemo でメモ化すべき計算結果// ❌ 修正前
function ComponentName(props) {
// メモ化されていない処理
}
// ✅ 修正後
const ComponentName = React.memo(function ComponentName(props) {
// メモ化された処理
});
修正案には以下を含めます:
詳細なメモ化パターンと検出ロジックは references/memoization-patterns.md を参照してください。