React Effects Audit Skill

Target: $ARGUMENTS

React Effects Audit

Overview

Scan React codebases to detect unnecessary useEffect usage based on official React documentation ("You Might Not Need an Effect"). Reports anti-patterns with severity, location, and recommended fixes.

Agent Workflow (MANDATORY)

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

Anti-Pattern Summary

| # | Anti-Pattern | Severity | Detection | |---|---|---|---| | 1 | Derived state in Effect | WARNING | useEffect + setState from other state/props | | 2 | Expensive calculation in Effect | WARNING | useEffect + setState with filter/map/reduce | | 3 | State reset via Effect | WARNING | useEffect resets state when prop changes | | 4 | Event logic in Effect | CRITICAL | User interaction logic inside useEffect | | 5 | Parent notification via Effect | WARNING | useEffect calls parent onChange/onUpdate | | 6 | Effect chains | CRITICAL | Multiple useEffect triggering each other | | 7 | Missing cleanup in fetch | CRITICAL | useEffect fetch without cleanup/AbortController | | 8 | Manual store subscription | WARNING | addEventListener/subscribe in useEffect | | 9 | App init in Effect | INFO | One-time init logic in useEffect(fn, []) |

Severity Levels

| Level | Meaning | Action | |---|---|---| | CRITICAL | Bugs, race conditions, memory leaks | Fix immediately | | WARNING | Performance issues, unnecessary re-renders | Fix same session | | INFO | Readability, minor inefficiency | Fix if time allows |

Reference Guide

Skill References

| Reference | When to Consult | |---|---| | anti-patterns.md | Understanding each anti-pattern | | detection-rules.md | Grep patterns for scanning | | fix-patterns-core.md | Fix examples #1-5 | | fix-patterns-advanced.md | Fix examples #6-9 | | report-format.md | Generating audit report |

SOLID Cross-References (MANDATORY)

This audit complements existing SOLID skills. Always cross-reference:

| Project Type | SOLID Skill | Key Rule | |---|---|---| | Next.js | fuse-nextjs:solid-nextjs | No useEffect for data fetching; use Server Components | | React | fuse-react:solid-react | No useEffect for data fetching; use TanStack Query |

Integration: When auditing a Next.js or React project, also load the corresponding SOLID skill to check architecture-level violations (file size, interface separation, business logic in components).

Quick Start

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+ Considerations

| Feature | Impact on Audit | |---|---| | React Compiler | Auto-memoizes; useMemo less needed but Effect anti-patterns still apply | | useEffectEvent | Stable in 19.2; solves stale closure in Effects without adding deps | | Activity API | Alternative to conditional rendering; reduces mount/unmount Effects | | useSyncExternalStore | Replaces manual subscription Effects (anti-pattern #8) | | Server Components | Eliminates many data-fetching Effects entirely |

Forbidden Behaviors

Do NOT auto-fix without showing the finding first
Do NOT flag Effects that synchronize with external systems (valid use)
Do NOT flag data fetching Effects that have proper cleanup
Do NOT ignore context: always Read the file before confirming a finding

Agent Skills: React Effects Audit

Install this agent skill to your local

Skill Files