react-effects-auditlisted
Install: claude install-skill fusengine/agents
**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 condit