SuperAPI AI 工具集

react-useeffect-avoid

编程与开发

查看项目

更新于 10-16 05:47

技能介绍

用途:该技能用于审查 React 代码中的 useEffect,判断其是否必要,并给出保留、删除或替换的建议。核心原则是 useEffect 只用于与外部系统同步,纯 React 逻辑应放在渲染过程或事件处理器中。

主要能力:识别并处理常见反模式,包括把 effect 当作通用状态管理、把 props 复制进 state、用 effect 处理用户操作或派生状态。提供替代方案:派生状态在渲染时计算,开销大时用 useMemo;表单提交用异步提交处理器;基于 props 的重置用 key 重新挂载;事件副作用放事件处理器;服务器数据优先使用框架 loader、TanStack Query、SWR 或 Suspense;共享外部状态用 useSyncExternalStore。

使用方式:按决策流程判断——是否存在外部系统?有则用带清理函数的 effect;是派生值则在渲染时计算;由用户触发则用事件处理器;需要重置则用 key;共享外部状态用 useSyncExternalStore;异步服务器数据优先用现成数据库。保留 effect 时需指明所同步的外部系统,删除或替换时需给出替代模式。

适用场景:React 代码审查、重构 effect 相关逻辑、处理订阅、定时器、浏览器 API、第三方库、分析埋点和文档标题更新等确需同步外部系统的场景。

限制:资料未提供具体安装命令、平台支持范围、收费方式或效果数据;参考文档包括 context/anti-patterns.md、context/patterns-to-avoid.md、context/decision-tree.md 以及 React 官方文档《You Might Not Need an Effect》和《Synchronizing with Effects》。