SuperAPI AI 工具集

react-effects-audit

前端与建站

查看项目

更新于 10-15 21:48

技能介绍

用途:扫描 React/Next.js 代码库,找出不必要或不安全的 useEffect 用法,依据 React 官方文档《You Might Not Need an Effect》报告反模式,附严重级别、位置与推荐修复。目标通过 $ARGUMENTS 指定。

主要能力:检测 9 类反模式——Effect 中派生状态、Effect 中昂贵计算、用 Effect 重置状态、Effect 中放事件逻辑、用 Effect 通知父组件、Effect 链、fetch 缺少清理、手动订阅 store、Effect 中做应用初始化。严重级别分 CRITICAL(Bug、竞态、内存泄漏)、WARNING(性能与多余重渲染)、INFO(可读性与轻微低效)。

使用方式:强制四阶段工作流——扫描目标文件(Glob .tsx、.jsx、.ts、.js)、按检测规则 Grep、读取被标记文件分析上下文、生成含修复建议的报告。先判断项目类型(next.config.* 为 Next.js,package.json 为 React),再交叉引用对应 SOLID 技能:Next.js 用 fuse-nextjs:solid-nextjs,React 用 fuse-react:solid-react,检查架构级违规(文件大小、接口分离、组件内业务逻辑)。参考文档包括 anti-patterns.md、detection-rules.md、fix-patterns-core.md、fix-patterns-advanced.md、report-format.md。

适用场景:React 与 Next.js 项目代码审计,尤其数据获取 Effect 应改为 Server Components 或 TanStack Query 的情况。

限制:不会在展示发现前自动修复;不标记与外部系统同步的合法 Effect;不标记有正确清理的数据获取 Effect;确认发现前必须读取文件上下文。React 19+ 相关说明涉及 React Compiler、useEffectEvent、Activity API、useSyncExternalStore、Server Components。具体安装命令与收费信息暂未提供。