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