Agent skill
react-hooks-advanced
React Hooksの高度な使用パターンと最適化技術を専門とするスキル。 useEffect依存配列、メモ化戦略、カスタムフック設計、useReducerパターンを提供し、 予測可能で効率的な状態管理を実現。 Anchors: • React公式ドキュメント（Meta）/ 適用: Hooks設計 / 目的: 公式パターン準拠 • 『Learning React』（Banks/Porcello）/ 適用: コンポーネント設計 / 目的: 実践的なHooks活用 • Dan Abramovのブログ / 適用: useEffect思想 / 目的: 依存配列の完全性原則 Trigger: Use when optimizing React hooks, designing custom hooks, implementing useReducer patterns, fixing useEffect dependency issues, or applying memoization strategies. react hooks, useEffect, useCallback, useMemo, useReducer, custom hook, dependency array, memoization
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/react-hooks-advanced-daishiman-aiworkfloworchestrat
SKILL.md
React Hooks Advanced
概要
React Hooksの高度な使用パターンと最適化技術を専門とするスキル。ダン・アブラモフの思想に基づき、依存配列の完全性原則、測定駆動のメモ化戦略、カスタムフック設計を通じて、予測可能で効率的な状態管理を実現します。
ワークフロー
Phase 1: 現状分析
目的: 現在のHooks使用状況を分析し問題点を特定する
アクション:
- 対象コンポーネントのHooks使用状況を確認
- ESLint（react-hooks/exhaustive-deps）警告を確認
- パフォーマンス問題の有無をReact DevToolsで測定
Task: agents/analyze-hooks.md を参照
Phase 2: 依存配列設計
目的: useEffect/useCallback/useMemoの依存配列を適切に設計する
アクション:
- 依存配列の完全性原則を適用
- 古いクロージャ問題の回避パターンを適用
- 無限ループ発生パターンを排除
Task: agents/design-dependencies.md を参照
Phase 3: メモ化戦略
目的: 測定に基づいた適切なメモ化を実装する
アクション:
- React.memo、useCallback、useMemoの適用判断
- Profilerで再レンダリング頻度を測定
- 実際のパフォーマンス改善を確認
Task: agents/apply-memoization.md を参照
Phase 4: カスタムフック設計
目的: 再利用可能なカスタムフックを設計する
アクション:
- 抽出すべきロジックを特定
- 単一責任でカスタムフックを設計
- テスト可能な形で実装
Task: agents/design-custom-hooks.md を参照
Task仕様ナビ
| Task | 起動タイミング | 入力 | 出力 |
|---|---|---|---|
| analyze-hooks | Phase 1開始時 | 対象コンポーネント | 分析レポート |
| design-dependencies | Phase 2開始時 | 分析レポート | 依存配列設計書 |
| apply-memoization | Phase 3開始時 | パフォーマンス計測 | メモ化実装 |
| design-custom-hooks | Phase 4開始時 | 共通ロジック | カスタムフック |
詳細仕様: 各Taskの詳細は agents/ ディレクトリを参照
ベストプラクティス
すべきこと
| 推奨事項 | 理由 |
|---|---|
| ESLint exhaustive-depsルールに従う | 古いクロージャ問題を防止 |
| メモ化は測定してから適用 | 無駄なオーバーヘッドを回避 |
| 複雑な状態にはuseReducerを使用 | 状態遷移の予測可能性向上 |
| カスタムフックで共通ロジックを抽出 | 再利用性と可読性向上 |
| useCallbackの依存配列を最小化 | 不要な再生成を防止 |
避けるべきこと
| 禁止事項 | 問題点 |
|---|---|
| 依存配列から値を意図的に除外 | 古いクロージャ、予測不能な動作 |
| 無差別なメモ化 | メモ化自体がコストになる |
| useEffect内での無限ループ | パフォーマンス劣化、クラッシュ |
| eslint-disable-next-lineの多用 | 本質的な問題を隠蔽 |
| useRefで依存配列を回避 | 警告を抑制するだけで問題解決にならず |
リソース参照
references/（詳細知識）
| リソース | パス | 読込条件 |
|---|---|---|
| 依存配列パターン | references/dependency-array-patterns.md | 依存配列設計時 |
| メモ化戦略 | references/memoization-strategies.md | メモ化検討時 |
| useReducer | references/use-reducer-patterns.md | 複雑状態管理時 |
| Hooks選択ガイド | references/hooks-selection-guide.md | Hooks選択時 |
scripts/（決定論的処理）
| スクリプト | 機能 |
|---|---|
scripts/analyze-hooks-usage.mjs |
Hooks使用状況の分析 |
scripts/log_usage.mjs |
スキル使用履歴の記録 |
assets/（テンプレート）
| アセット | 用途 |
|---|---|
assets/custom-hook-template.md |
カスタムフック開発雛形 |
assets/use-reducer-template.md |
useReducerパターン雛形 |
変更履歴
| Version | Date | Changes |
|---|---|---|
| 3.1.0 | 2026-01-02 | agents/追加（4エージェント体制確立） |
| 3.0.0 | 2026-01-02 | 18-skills.md仕様完全準拠、ワークフロー改善 |
| 1.0.0 | 2025-12-31 | 初版 |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?