react-effects-audit

Name: react-effects-audit
Author: fusengine

21stars3forks

How to install react-effects-audit?

fusengine/agents/react-effects-audit

$npx -y skills add fusengine/agents --skill react-effects-audit

Installs into the current project.

Summary

Audit React components for unnecessary useEffect patterns. Detects 9 anti-patterns from \"You Might Not Need an Effect\" and proposes fixes with severity levels. Use when: auditing React or Next.js components for unnecessary or unsafe useEffect usage.

Files · 1

View on GitHub

SKILL.md

1	Target: $ARGUMENTS
2
3	# React Effects Audit
4
5	## Overview
6
7	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.
8
9	---
10
11	## Agent Workflow (MANDATORY)
12
13	```
14	PHASE 1: Scan target files (Glob .tsx, .jsx, .ts, .js)
15	PHASE 2: Detect anti-patterns (Grep detection rules)
16	PHASE 3: Analyze context (Read flagged files)
17	PHASE 4: Generate report with fixes
18	```
19
20	---
21
22	## Anti-Pattern Summary
23
24	\| # \| Anti-Pattern \| Severity \| Detection \|
25	\|---\|---\|---\|---\|
26	\| 1 \| Derived state in Effect \| WARNING \| `useEffect` + `setState` from other state/props \|
27	\| 2 \| Expensive calculation in Effect \| WARNING \| `useEffect` + `setState` with filter/map/reduce \|
28	\| 3 \| State reset via Effect \| WARNING \| `useEffect` resets state when prop changes \|
29	\| 4 \| Event logic in Effect \| CRITICAL \| User interaction logic inside `useEffect` \|
30	\| 5 \| Parent notification via Effect \| WARNING \| `useEffect` calls parent `onChange`/`onUpdate` \|
31	\| 6 \| Effect chains \| CRITICAL \| Multiple `useEffect` triggering each other \|
32	\| 7 \| Missing cleanup in fetch \| CRITICAL \| `useEffect` fetch without cleanup/AbortController \|
33	\| 8 \| Manual store subscription \| WARNING \| `addEventListener`/`subscribe` in `useEffect` \|
34	\| 9 \| App init in Effect \| INFO \| One-time init logic in `useEffect(fn, [])` \|
35
36	---
37
38	## Severity Levels
39
40	\| Level \| Meaning \| Action \|
41	\|---\|---\|---\|
42	\| CRITICAL \| Bugs, race conditions, memory leaks \| Fix immediately \|
43	\| WARNING \| Performance issues, unnecessary re-renders \| Fix same session \|
44	\| INFO \| Readability, minor inefficiency \| Fix if time allows \|
45
46	---
47
48	## Reference Guide
49
50	### Skill References
51
52	\| Reference \| When to Consult \|
53	\|---\|---\|
54	\| [anti-patterns.md](references/anti-patterns.md) \| Understanding each anti-pattern \|
55	\| [detection-rules.md](references/detection-rules.md) \| Grep patterns for scanning \|
56	\| [fix-patterns-core.md](references/fix-patterns-core.md) \| Fix examples #1-5 \|
57	\| [fix-patterns-advanced.md](references/fix-patterns-advanced.md) \| Fix examples #6-9 \|
58	\| [report-format.md](references/report-format.md) \| Generating audit report \|
59
60	### SOLID Cross-References (MANDATORY)
61
62	This audit complements existing SOLID skills. Always cross-reference:
63
64	\| Project Type \| SOLID Skill \| Key Rule \|
65	\|---\|---\|---\|
66	\| Next.js \| `fuse-nextjs:solid-nextjs` \| No `useEffect` for data fetching; use Server Components \|
67	\| React \| `fuse-react:solid-react` \| No `useEffect` for data fetching; use TanStack Query \|
68
69	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).
70
71	---
72
73	## Quick Start
74
75	```
76	1. Glob */.{tsx,jsx} in target directory
77	2. Detect project type (next.config.* → Next.js, package.json → React)
78	3. Load corresponding SOLID skill references if applicable
79	4. For each detection rule in detection-rules.md:
80	→ Grep pattern across all files
81	→ Read flagged files for context analysis
82	→ Confirm or dismiss (false positive check)
83	5. For each confirmed finding:
84	→ Identify severity from anti-patterns.md
85	→ Propose fix from fix-patterns-core.md or fix-patterns-advanced.md
86	→ Cross-check with SOLID rules (SRP, file size, hooks separation)
87	6. Output report using report-format.md
88	```
89
90	---
91
92	## React 19+ Considerations
93
94	\| Feature \| Impact on Audit \|
95	\|---\|---\|
96	\| React Compiler \| Auto-memoizes; `useMemo` less needed but Effect anti-patterns still apply \|
97	\| useEffectEvent \| Stable in 19.2; solves stale closure in Effects without adding deps \|
98	\| Activity API \| Alternative to conditional rendering; reduces mount/unmount Effects \|
99	\| useSyncExternalStore \| Replaces manual subscription Effects (anti-pattern #8) \|
100	\| Server Components \| Eliminates many data-fetching Effects entirely \|
101
102	---
103
104	## Forbidden Behaviors
105
106	- Do NOT auto-fix without showing the finding first
107	- Do NOT flag Effects that synchronize with external systems (valid use)
108	- Do NOT flag data fetching Effects that have proper cleanup
109	- Do NOT ignore context: always Read the file before confirming a finding

People who liked this also viewed

6 picks

Type

react-effects-audit

21stars3forks

View on GitHub

How to install react-effects-audit?

fusengine/agents/react-effects-audit

$npx -y skills add fusengine/agents --skill react-effects-audit

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	Target: $ARGUMENTS
2
3	# React Effects Audit
4
5	## Overview
6
7	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.
8
9	---
10
11	## Agent Workflow (MANDATORY)
12
13	```
14	PHASE 1: Scan target files (Glob .tsx, .jsx, .ts, .js)
15	PHASE 2: Detect anti-patterns (Grep detection rules)
16	PHASE 3: Analyze context (Read flagged files)
17	PHASE 4: Generate report with fixes
18	```
19
20	---
21
22	## Anti-Pattern Summary
23
24	\| # \| Anti-Pattern \| Severity \| Detection \|
25	\|---\|---\|---\|---\|
26	\| 1 \| Derived state in Effect \| WARNING \| `useEffect` + `setState` from other state/props \|
27	\| 2 \| Expensive calculation in Effect \| WARNING \| `useEffect` + `setState` with filter/map/reduce \|
28	\| 3 \| State reset via Effect \| WARNING \| `useEffect` resets state when prop changes \|
29	\| 4 \| Event logic in Effect \| CRITICAL \| User interaction logic inside `useEffect` \|
30	\| 5 \| Parent notification via Effect \| WARNING \| `useEffect` calls parent `onChange`/`onUpdate` \|
31	\| 6 \| Effect chains \| CRITICAL \| Multiple `useEffect` triggering each other \|
32	\| 7 \| Missing cleanup in fetch \| CRITICAL \| `useEffect` fetch without cleanup/AbortController \|
33	\| 8 \| Manual store subscription \| WARNING \| `addEventListener`/`subscribe` in `useEffect` \|
34	\| 9 \| App init in Effect \| INFO \| One-time init logic in `useEffect(fn, [])` \|
35
36	---
37
38	## Severity Levels
39
40	\| Level \| Meaning \| Action \|
41	\|---\|---\|---\|
42	\| CRITICAL \| Bugs, race conditions, memory leaks \| Fix immediately \|
43	\| WARNING \| Performance issues, unnecessary re-renders \| Fix same session \|
44	\| INFO \| Readability, minor inefficiency \| Fix if time allows \|
45
46	---
47
48	## Reference Guide
49
50	### Skill References
51
52	\| Reference \| When to Consult \|
53	\|---\|---\|
54	\| [anti-patterns.md](references/anti-patterns.md) \| Understanding each anti-pattern \|
55	\| [detection-rules.md](references/detection-rules.md) \| Grep patterns for scanning \|
56	\| [fix-patterns-core.md](references/fix-patterns-core.md) \| Fix examples #1-5 \|
57	\| [fix-patterns-advanced.md](references/fix-patterns-advanced.md) \| Fix examples #6-9 \|
58	\| [report-format.md](references/report-format.md) \| Generating audit report \|
59
60	### SOLID Cross-References (MANDATORY)
61
62	This audit complements existing SOLID skills. Always cross-reference:
63
64	\| Project Type \| SOLID Skill \| Key Rule \|
65	\|---\|---\|---\|
66	\| Next.js \| `fuse-nextjs:solid-nextjs` \| No `useEffect` for data fetching; use Server Components \|
67	\| React \| `fuse-react:solid-react` \| No `useEffect` for data fetching; use TanStack Query \|
68
69	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).
70
71	---
72
73	## Quick Start
74
75	```
76	1. Glob */.{tsx,jsx} in target directory
77	2. Detect project type (next.config.* → Next.js, package.json → React)
78	3. Load corresponding SOLID skill references if applicable
79	4. For each detection rule in detection-rules.md:
80	→ Grep pattern across all files
81	→ Read flagged files for context analysis
82	→ Confirm or dismiss (false positive check)
83	5. For each confirmed finding:
84	→ Identify severity from anti-patterns.md
85	→ Propose fix from fix-patterns-core.md or fix-patterns-advanced.md
86	→ Cross-check with SOLID rules (SRP, file size, hooks separation)
87	6. Output report using report-format.md
88	```
89
90	---
91
92	## React 19+ Considerations
93
94	\| Feature \| Impact on Audit \|
95	\|---\|---\|
96	\| React Compiler \| Auto-memoizes; `useMemo` less needed but Effect anti-patterns still apply \|
97	\| useEffectEvent \| Stable in 19.2; solves stale closure in Effects without adding deps \|
98	\| Activity API \| Alternative to conditional rendering; reduces mount/unmount Effects \|
99	\| useSyncExternalStore \| Replaces manual subscription Effects (anti-pattern #8) \|
100	\| Server Components \| Eliminates many data-fetching Effects entirely \|
101
102	---
103
104	## Forbidden Behaviors
105
106	- Do NOT auto-fix without showing the finding first
107	- Do NOT flag Effects that synchronize with external systems (valid use)
108	- Do NOT flag data fetching Effects that have proper cleanup
109	- Do NOT ignore context: always Read the file before confirming a finding

People who liked this also viewed

6 picks

Type