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
majiayu000