Target: $ARGUMENTS

目标: $ARGUMENTS

React Effects Audit

React useEffect 审计

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.

扫描React代码库，基于React官方文档《你可能不需要Effect》检测不必要的

useEffect

使用情况，报告反模式的严重级别、位置及推荐修复方案。

Agent Workflow (MANDATORY)

Agent 工作流程（强制要求）

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

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

反模式汇总


useEffect
useEffect
useEffect
useEffect
useEffect
useEffect
useEffect
addEventListener
useEffect(fn, [])

#	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, [])`


useEffect
useEffect
useEffect
useEffect
useEffect
useEffect
useEffect
useEffect
useEffect(fn, [])

序号	反模式	严重级别	检测方式
1	Effect中使用派生状态	WARNING	`useEffect` + 从其他state/props触发 `setState`
2	Effect中执行昂贵计算	WARNING	`useEffect` + 结合filter/map/reduce触发 `setState`
3	通过Effect重置状态	WARNING	当props变化时， `useEffect` 重置状态
4	Effect中包含事件逻辑	CRITICAL	`useEffect` 内部包含用户交互逻辑
5	通过Effect通知父组件	WARNING	`useEffect` 调用父组件的 `onChange` / `onUpdate` 方法
6	Effect链式调用	CRITICAL	多个 `useEffect` 互相触发
7	Fetch操作缺少清理逻辑	CRITICAL	`useEffect` 中的fetch未包含清理/AbortController逻辑
8	手动订阅外部存储	WARNING	`useEffect` 中使用 `addEventListener` / `subscribe`
9	Effect中执行应用初始化	INFO	`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

级别	含义	处理建议
CRITICAL	Bug、竞态条件、内存泄漏	立即修复
WARNING	性能问题、不必要的重渲染	本次任务内修复
INFO	可读性问题、轻微低效	如有时间再修复

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

参考文档	查阅场景
anti-patterns.md	理解各类反模式细节
detection-rules.md	扫描用的Grep规则
fix-patterns-core.md	反模式#1-5的修复示例
fix-patterns-advanced.md	反模式#6-9的修复示例
report-format.md	生成审计报告的格式规范

SOLID Cross-References (MANDATORY)

SOLID 交叉参考（强制要求）

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).

本次审计可与现有SOLID技能互补，务必交叉参考：

项目类型	SOLID 技能	核心规则
Next.js	`fuse-nextjs:solid-nextjs`	禁止使用 `useEffect` 进行数据获取；应使用Server Components
React	`fuse-react:solid-react`	禁止使用 `useEffect` 进行数据获取；应使用TanStack Query

集成说明: 审计Next.js或React项目时，还需加载对应的SOLID技能，检查架构级别的违规情况（如文件大小、接口分离、组件中包含业务逻辑等）。

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

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

React 19+ 注意事项

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

特性	对审计的影响
React Compiler	自动进行记忆化处理； `useMemo` 的需求降低，但Effect反模式仍适用
useEffectEvent	在19.2版本中稳定；无需添加依赖即可解决Effect中的闭包过期问题
Activity API	可替代条件渲染；减少挂载/卸载Effect的使用
useSyncExternalStore	替代手动订阅的Effect（反模式#8）
Server Components	彻底消除大量数据获取类Effect

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

不得在未展示检测结果的情况下自动修复
不得标记用于与外部系统同步的Effect（此类为合法使用场景）
不得标记包含正确清理逻辑的数据获取类Effect
不得忽略上下文：确认检测结果前务必阅读对应文件

react-effects-audit

Original

Translation