Help us improve
Share bugs, ideas, or general feedback.
From fuse-ai-pilot
Audit React components for unnecessary useEffect patterns. Detects 9 anti-patterns from "You Might Not Need an Effect" and proposes fixes with severity levels.
npx claudepluginhub fusengine/agents --plugin fuse-ai-pilotHow this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-ai-pilot:react-effects-auditThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Target:** $ARGUMENTS
Audits React codebases for anti-patterns including useEffect misuse, stale closures, derived state in effects, and memory leaks. Produces scored gap analysis table with severity ratings and applies prioritized fixes on request.
Audits React and Next.js code for six critical pitfalls: nested components, index keys, derived state in effects, unsafe fetching, unmemoized contexts, and more.
Guides React developers through a decision tree to verify useEffect necessity before writing, suggesting alternatives like inline derivation, event handlers, key prop, or TanStack Query to prevent anti-patterns.
Share bugs, ideas, or general feedback.
Target: $ARGUMENTS
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.
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 | 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, []) |
| 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 | 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 |
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).
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
| 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 |