SuperAPI AI 工具集

react-effects-audit

编程与开发

查看项目

更新于 10-26 16:21

技能介绍

react-effects-audit 是一个用于审计 React 与 Next.js 代码中 useEffect 使用情况的技能,目标是找出不必要或不安全的 Effect 写法。其检测依据为 React 官方文档《You Might Not Need an Effect》。

用途 扫描 React 代码库,识别不符合官方建议的 useEffect 用法,输出带严重程度、位置和修复建议的审计报告。

主要能力 检测以下 9 类反模式:

  1. 在 Effect 中根据其他 state 或 props 派生状态(WARNING);
  2. 在 Effect 中执行 filter、map、reduce 等昂贵计算(WARNING);
  3. 当 prop 变化时用 Effect 重置 state(WARNING);
  4. 在 useEffect 中放置用户交互逻辑(CRITICAL);
  5. 用 Effect 调用父组件的 onChange 或 onUpdate(WARNING);
  6. 多个 useEffect 相互触发形成链式 Effect(CRITICAL);
  7. useEffect 中发起 fetch 但缺少清理或 AbortController(CRITICAL);
  8. 在 useEffect 中手动 addEventListener 或 subscribe 订阅 store(WARNING);
  9. 在 useEffect(fn, []) 中执行一次性应用初始化(INFO)。

严重程度分为三级:CRITICAL 表示可能引发 bug、竞态条件或内存泄漏,建议立即修复;WARNING 表示存在性能问题或不必要的重渲染,建议在当次会话内修复;INFO 表示可读性或轻微低效问题,视时间决定是否修复。

使用方式 执行流程分为 4 个阶段:第一阶段用 Glob 扫描目标目录中的 .tsx、.jsx、.ts、.js 文件;第二阶段用 Grep 规则检测反模式;第三阶段读取被标记的文件进行上下文分析;第四阶段生成报告并给出修复建议。扫描时会根据 next.config.* 或 package.json 判断项目类型,再按 detection-rules.md 的规则逐条匹配,并读取文件确认,以排除误报。每条确认的问题会对照 anti-patterns.md 确定严重程度,从 fix-patterns-core.md 或 fix-patterns-advanced.md 中选取修复方案,并用 SOLID 规则交叉检查。技能提供目标参数 $ARGUMENTS。

跨项目审计 审计 Next.js 项目时会交叉引用 fuse-nextjs:solid-nextjs,审计 React 项目时交叉引用 fuse-react:solid-react。核心规则是:数据获取不应使用 useEffect,Next.js 应改用 Server Components,React 应改用 TanStack Query。同时还会检查文件大小、接口分离、组件内业务逻辑等架构层面的问题。

适用场景 适用于审查已有 React 或 Next.js 代码库中 Effect 的合理性,或在进行重构前做问题排查。

限制与约束 技能不会在展示问题之前自动修复;不会标记与外部系统同步等合法 Effect 用法;不会标记带有正确清理逻辑的数据获取 Effect;在确认问题前必须读取文件并结合上下文判断。明确禁止:不展示发现即自动修复、误报合法同步 Effect、误报有清理的 fetch Effect、跳过上下文读取。

React 19+ 相关说明 React Compiler 会自动 memo,减少 useMemo 需求,但 Effect 反模式仍然适用;useEffectEvent 在 19.2 稳定,可在不增加依赖的情况下解决 Effect 中的过期闭包;Activity API 可作为条件渲染的替代,减少挂载与卸载 Effect;useSyncExternalStore 可替代手动订阅 Effect(反模式 8);Server Components 可消除大量数据获取 Effect。

其它 该技能的官方页面未提供额外信息;安装命令、收费、价格等暂未提供。