SuperAPI AI 工具集

react-ban-use-effect

前端与建站

查看项目

更新于 10-16 07:15

技能介绍

用途:该技能用于审查、替换 React 中的直接 useEffect 调用,或在需要时落实“禁止直接副作用”的仓库级策略。直接 useEffect 被视为与外部系统同步的逃生舱,组件本身不应调用;只有经过审查、针对真实外部系统的领域专用 Hook 可以使用。

主要能力:在工作面上查找直接导入、React.useEffect(...) 命名空间调用以及 useEffect 包装器,并对每个副作用分类,按以下优先级替换:渲染期计算;服务端、loader 或框架数据 API;仓库的服务端状态层(如 TanStack Query 的 queryOptions 工厂,key 含变量并透传 signal);事件处理器、action 或 mutation;keyed 组件边界;useSyncExternalStore;经过审查的、面向真实外部系统的领域专用 Hook。若都不适用,需在保留副作用前说明外部同步契约。

使用方式:若请求是审查,只产出发现;若请求是实现,则授权进行范围内替换与验证,无需再次批准。合法副作用应放入以外部系统命名的 Hook 中,单独文件存放,由 Hook 负责 setup 与 cleanup,以响应式输入为参数,并列出 setup 或 cleanup 读取的所有值,调用它的组件保持无副作用。优先使用仓库已有 Hook。

强制启用时,扩展现有 linter,拒绝命名 useEffect 导入和 React.useEffect(...) 调用,仅允许经审查的具名集成 Hook 文件,不得允许目录(如 src/hooks/**)或通用包装器,并把包装器及其调用者报告为待迁移违规。保持本地门禁与 CI 使用同一 lint 面,不能用 @latest 诊断工具作为持久强制手段。

限制:不要编写接受回调与调用方依赖数组的通用包装器(如 useUpdateEffect、useAsyncEffect、useMountEffect);不得抑制 react-hooks/exhaustive-deps;不得用异常 Hook 获取服务端状态、把 props 复制进 state、转发用户操作或隐藏应放在 keyed 边界处的重置。范围迁移仅限于被触及或请求的面;除非要求,否则不要改动 useLayoutEffect、useInsertionEffect、框架生命周期 API 及非 React 副作用系统,包括 lint 规则。只有测量到行为或仓库既有模式时才应用性能原语。只依据请求或仓库策略添加库;若没有服务端状态层,应将剩余副作用称为设计缺口。需运行 lint、类型与测试门禁,并对变更行为做最小的真实 UI 或 Hook 检查。具体实现细节与代码示例暂未提供。