react-effects-audit

React Effects Audit 会扫描目标文件或目录，查找 React 官方《你可能不需要 Effect》指南中介绍的 9 种 `useEffect` 反模式——派生状态、昂贵计算、状态重置、事件逻辑、通知父组件、Effect 链、缺少 fetch 清理、手动订阅 store，以及应用初始化逻辑——并为每项标注严重级别（CRITICAL/WARNING/INFO）、确切位置和建议的修复方案。

如果目标是 Next.js 或 React 项目，它会交叉参考相应的 SOLID 技能（solid-nextjs 或 solid-react），以发现架构层面的违规情况，例如本应使用 Server Components 或 TanStack Query 的数据获取 Effect。它绝不会在展示问题之前自动修复。

目标： $ARGUMENTS

React Effects Audit

概述

扫描 React 代码库，根据 React 官方文档（《你可能不需要 Effect》）检测不必要的 useEffect 用法。报告反模式的严重级别、位置和建议的修复方案。

---

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

---

反模式摘要

#	反模式	严重级别	检测方式
1	Effect 中的派生状态	WARNING	useEffect + 根据其他状态/props 调用 setState
2	Effect 中的昂贵计算	WARNING	useEffect + 使用 filter/map/reduce 调用 setState
3	通过 Effect 重置状态	WARNING	useEffect 在 prop 变化时重置状态
4	Effect 中的事件逻辑	CRITICAL	在 useEffect 中处理用户交互逻辑
5	通过 Effect 通知父组件	WARNING	useEffect 调用父组件的 onChange/onUpdate
6	Effect 链	CRITICAL	多个 useEffect 相互触发
7	fetch 缺少清理	CRITICAL	useEffect 中的 fetch 没有清理逻辑/AbortController
8	手动订阅 store	WARNING	在 useEffect 中使用 addEventListener/subscribe
9	在 Effect 中初始化应用	INFO	在 useEffect(fn, []) 中执行一次性初始化逻辑

---

严重级别

级别	含义	操作
CRITICAL	错误、竞态条件、内存泄漏	立即修复
WARNING	性能问题、不必要的重新渲染	在本次会话中修复
INFO	可读性问题、轻微的低效情况	有时间时修复

---

参考指南

技能参考

参考资料	何时查阅
anti-patterns.md	了解各类反模式
detection-rules.md	扫描时使用的 Grep 模式
fix-patterns-core.md	修复示例 #1-5
fix-patterns-advanced.md	修复示例 #6-9
report-format.md	生成审计报告

SOLID 交叉参考（必须遵循）

本审计与现有的 SOLID 技能互为补充。务必交叉参考：

项目类型	SOLID 技能	关键规则
Next.js	fuse-nextjs:solid-nextjs	不要使用 useEffect 获取数据；改用 Server Components
React	fuse-react:solid-react	不要使用 useEffect 获取数据；改用 TanStack Query

集成方式：审计 Next.js 或 React 项目时，还要加载相应的 SOLID 技能，检查架构层面的违规情况（文件大小、接口分离、组件中的业务逻辑）。

---

快速入门

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+ 注意事项

特性	对审计的影响
React Compiler	自动进行记忆化；较少需要 useMemo，但 Effect 反模式仍然适用
useEffectEvent	在 19.2 中稳定；无需添加依赖项，即可解决 Effect 中的闭包过期问题
Activity API	可替代条件渲染；减少挂载/卸载 Effect
useSyncExternalStore	替代手动订阅 Effect（反模式 #8）
Server Components	完全消除许多数据获取 Effect

---

禁止的行为

• 不要在展示问题之前自动修复
• 不要标记与外部系统同步的 Effect（这是有效用法）
• 不要标记具有适当清理逻辑的数据获取 Effect
• 不要忽略上下文：确认问题之前，务必先读取文件