react-effects-audit

React Effects Audit は、対象ファイルまたはディレクトリをスキャンし、React の公式ガイダンス「You Might Not Need an Effect」で説明されている 9 種類の `useEffect` のアンチパターン（派生状態、高コストな計算、状態のリセット、イベント処理、親への通知、Effect の連鎖、fetch のクリーンアップ漏れ、ストアの手動購読、アプリ初期化ロジック）を検出します。それぞれについて、重大度（CRITICAL/WARNING/INFO）、正確な位置、修正案を提示します。

対象が Next.js または React プロジェクトの場合、対応する SOLID スキル（solid-nextjs または solid-react）も参照し、Server Components や TanStack Query を使うべきデータ取得 Effect など、アーキテクチャレベルの違反も検出します。検出内容を先に提示せずに自動修正することはありません。

対象: $ARGUMENTS

React Effects Audit

概要

React のコードベースをスキャンし、React の公式ドキュメント（「You Might Not Need an Effect」）に基づいて不要な useEffect の使用を検出します。アンチパターンを重大度、位置、推奨される修正とともに報告します。

---

エージェントのワークフロー（必須）

PHASE 1: Scan target files (Glob *.tsx, *.jsx, *.ts, *.js)
PHASE 2: Detect anti-patterns (Grep detection rules)
PHASE 3: Analyze context (Read flagged files)
PHASE 4: Generate report with fixes

---

アンチパターンの概要

#	アンチパターン	重大度	検出内容
1	Effect 内の派生状態	WARNING	useEffect + 他の状態や props に基づく setState
2	Effect 内の高コストな計算	WARNING	filter/map/reduce を伴う useEffect + setState
3	Effect による状態のリセット	WARNING	prop の変更時に状態をリセットする useEffect
4	Effect 内のイベント処理	CRITICAL	useEffect 内のユーザー操作ロジック
5	Effect による親への通知	WARNING	親の onChange/onUpdate を呼び出す useEffect
6	Effect の連鎖	CRITICAL	互いをトリガーする複数の useEffect
7	fetch のクリーンアップ漏れ	CRITICAL	クリーンアップまたは AbortController を伴わない fetch の useEffect
8	ストアの手動購読	WARNING	useEffect 内の addEventListener/subscribe
9	Effect 内のアプリ初期化	INFO	useEffect(fn, []) 内の一度だけ実行される初期化ロジック

---

重大度レベル

レベル	意味	対応
CRITICAL	バグ、競合状態、メモリリーク	直ちに修正
WARNING	パフォーマンスの問題、不要な再レンダー	同じセッション内に修正
INFO	可読性、軽微な非効率性	時間があれば修正

---

リファレンスガイド

スキルのリファレンス

リファレンス	参照する場面
anti-patterns.md	各アンチパターンの理解
detection-rules.md	スキャン用の grep パターン
fix-patterns-core.md	修正例 #1-5
fix-patterns-advanced.md	修正例 #6-9
report-format.md	監査レポートの生成

SOLID との相互参照（必須）

この監査は、既存の SOLID スキルを補完します。必ず相互参照してください。

プロジェクトの種類	SOLID スキル	主なルール
Next.js	fuse-nextjs:solid-nextjs	データ取得に useEffect を使わず、Server Components を使う
React	fuse-react:solid-react	データ取得に useEffect を使わず、TanStack Query を使う

統合: Next.js または React プロジェクトを監査する際は、対応する SOLID スキルも読み込み、アーキテクチャレベルの違反（ファイルサイズ、インターフェースの分離、コンポーネント内のビジネスロジック）を確認してください。

---

クイックスタート

1. Glob **/*.{tsx,jsx} in target directory
2. Detect project type (next.config.* → Next.js, package.json → React)
3. Load corresponding SOLID skill references if applicable
4. For each detection rule in detection-rules.md:
   → Grep pattern across all files
   → Read flagged files for context analysis
   → Confirm or dismiss (false positive check)
5. For each confirmed finding:
   → Identify severity from anti-patterns.md
   → Propose fix from fix-patterns-core.md or fix-patterns-advanced.md
   → Cross-check with SOLID rules (SRP, file size, hooks separation)
6. Output report using report-format.md

---

React 19 以降での考慮事項

機能	監査への影響
React Compiler	自動的にメモ化します。useMemo の必要性は下がりますが、Effect のアンチパターンは引き続き該当します
useEffectEvent	19.2 で安定版です。依存配列を追加せずに、Effect 内の古いクロージャの問題を解決します
Activity API	条件付きレンダリングの代替手段です。マウント／アンマウント時の Effect を減らします
useSyncExternalStore	手動購読の Effect（アンチパターン #8）に代わるものです
Server Components	多くのデータ取得 Effect を完全に不要にします

---

禁止されている動作

• 指摘事項を先に示さずに、自動修正しないでください
• 外部システムと同期する Effect を指摘しないでください（正当な用途です）
• 適切なクリーンアップが行われているデータ取得の Effect を指摘しないでください
• コンテキストを無視しないでください。指摘事項を確定する前に、必ずファイルを読み込んでください