performance-optimization-react

daishiman's avatarfrom daishiman

Reactアプリケーションのパフォーマンス最適化を体系的に実施するスキル。測定駆動の最適化アプローチで、不要な再レンダリングを削減し、ユーザー体験を向上させる。Anchors:• High Performance Browser Networking (Ilya Grigorik) / 適用: パフォーマンス測定手法 / 目的: データに基づいた最適化判断• React公式ドキュメント (Dan Abramov) / 適用: React.memo・useCallback・useMemo / 目的: 測定駆動の最適化実践• Clean Code (Robert C. Martin) / 適用: 早すぎる最適化を避ける原則 / 目的: 必要な最適化のみ実施Trigger:Use when optimizing React performance, reducing re-renders, applying React.memo, analyzing with React DevTools Profiler, implementing Context splitting, or diagnosing rendering performance issues.performance optimization, React performance, re-rendering, React.memo, useCallback, useMemo, profiler

⭐3stars🔀0forks📁View on GitHub🕐Updated Jan 10, 2026
[Debugging]

When & Why to Use This Skill

This Claude skill provides a systematic, measurement-driven framework for optimizing React application performance. It enables developers to identify bottlenecks using the React DevTools Profiler and implement precise optimizations—such as React.memo, useCallback, and useMemo—to reduce unnecessary re-renders and enhance the overall user experience through a structured 'Analyze-Optimize-Validate' workflow.

Use Cases

  • Diagnosing and resolving performance bottlenecks in complex React applications by analyzing rendering times and re-render frequency with the Profiler.
  • Implementing efficient memoization strategies using React.memo, useMemo, and useCallback to eliminate redundant component updates in large-scale lists or forms.
  • Optimizing React Context and state management structures to prevent global state changes from triggering unnecessary updates across the entire component tree.
  • Establishing performance baselines and conducting data-driven validation to ensure that optimization efforts result in measurable improvements in UI responsiveness.
nameperformance-optimization-react
description|
• High Performance Browser Networking (Ilya Grigorik) / 適用パフォーマンス測定手法 / 目的: データに基づいた最適化判断
• React公式ドキュメント (Dan Abramov) / 適用React.memo・useCallback・useMemo / 目的: 測定駆動の最適化実践
• Clean Code (Robert C. Martin) / 適用早すぎる最適化を避ける原則 / 目的: 必要な最適化のみ実施

Performance Optimization React

概要

Reactアプリケーションのパフォーマンス最適化を体系的に実施するスキル。測定→分析→最適化→検証のサイクルで、データに基づいた最適化判断を行い、不要な再レンダリングを削減する。

ワークフロー

Phase 1: パフォーマンス測定・分析

目的: React DevTools Profilerで測定し、ボトルネックを特定する

アクション:

  1. React DevTools Profilerをインストール・設定
  2. 最適化前のベースライン測定を実施
  3. レンダリング時間・再レンダリング回数を記録
  4. ボトルネックコンポーネントを特定
  5. 再レンダリングの原因を分析（親の更新/Context変更/Props変更/状態更新）
  6. 最適化優先度を決定（レンダリング時間・頻度に基づく）

Task: agents/analyze-performance.md を参照

Phase 2: 最適化戦略の実装

目的: 適切な最適化手法を選択・実装する

アクション:

  1. 原因に応じた最適化手法を選択
    • React.memo: 親の再レンダリング対策
    • useCallback: コールバックProps安定化
    • useMemo: 計算コスト削減
    • Context分割: Context更新の影響範囲縮小
  2. assets/optimization-checklist.md で実装計画を立案
  3. 測定に基づいて優先度の高いコンポーネントから実装
  4. 依存配列を正確に設定（ESLint exhaustive-depsルール準拠）
  5. TypeScript型チェックを維持

Task: agents/optimize-rendering.md を参照

Phase 3: 効果測定・検証

目的: 最適化の効果を測定し、品質を保証する

アクション:

  1. 最適化後の測定を実施（最適化前と同じ操作で比較）
  2. 改善率を計算（目標: レンダリング時間50%削減、再レンダリング回数70%削減）
  3. 副作用や新しい問題がないか確認
  4. 測定結果をドキュメント化
  5. コードレビュー・品質保証を実施
  6. assets/optimization-checklist.md で最終確認

Task: agents/validate-improvements.md を参照

Task仕様ナビ

Task 起動タイミング 入力 出力
analyze-performance Phase 1開始時 対象コンポーネント ボトルネック分析結果
optimize-rendering Phase 2開始時 分析結果 最適化実装コード
validate-improvements Phase 3開始時 最適化実装コード 効果測定結果・品質保証

ベストプラクティス

すべきこと

  • 必ずReact DevTools Profilerで測定してから最適化する
  • 最適化前後のデータを記録し、改善率を計算する
  • React.memoは測定で問題が確認された場合のみ適用する
  • useCallback/useMemoの依存配列はESLint exhaustive-depsルールに準拠させる
  • レンダリング時間100ms以上のコンポーネントを優先的に最適化する
  • Context分割は10個以上のコンポーネントで使用される場合に検討する
  • 最適化後に副作用や新しい問題がないか必ず確認する

避けるべきこと

  • 測定せずに「遅そうだから」という理由で最適化する（早すぎる最適化）
  • すべてのコンポーネントにReact.memoを適用する
  • useCallback/useMemoの依存配列を空にして警告を無視する
  • @ts-ignoreや@ts-expect-errorで型エラーを隠蔽する
  • 最適化後の測定を省略する
  • Context分割を過度に行い、かえって複雑化させる
  • 本番環境でのテストを省略する

リソース参照

references/（詳細知識）

リソース パス 用途
基礎レベル See references/Level1_basics.md パフォーマンス最適化の基礎
中級レベル See references/Level2_intermediate.md 中級最適化テクニック
上級レベル See references/Level3_advanced.md 上級最適化パターン
エキスパート See references/Level4_expert.md エキスパート最適化戦略
Profiler測定 See references/profiler-measurement.md React DevTools Profiler使い方
再レンダリング See references/re-rendering-patterns.md 再レンダリングの4つの原因
React.memo See references/react-memo-guide.md React.memo活用ガイド
Context分割 See references/context-splitting.md Context分割戦略

scripts/（決定論的処理）

スクリプト 用途 使用例
validate-skill.mjs スキル構造検証 node scripts/validate-skill.mjs
log_usage.mjs 使用記録・自動評価 node scripts/log_usage.mjs --result success --phase "Phase 3"

assets/（テンプレート）

テンプレート 用途
optimization-checklist.md 最適化プロセスチェックリスト

変更履歴

詳細な変更履歴は CHANGELOG.md を参照してください。