SuperAPI AI 工具集

async-effect-race-contracts

前端与建站

查看项目

更新于 10-16 06:44

技能介绍

用途:当数据层之下使用裸 useEffect/useLayoutEffect 执行异步副作用时,排查旧结果覆盖新结果、卸载后缺少清理、StrictMode 双调用、陈旧闭包等问题。

主要能力:区分 take-latest 与最后响应获胜,提倡 ignore 标记或 AbortController 并吞掉 AbortError;要求每个 subscribe/addEventListener/setInterval/connect 都有镜像清理,否则每次重跑累积泄漏;说明 StrictMode 双调用是压力测试而非缺陷,用 useRef 阻止第二次运行会掩盖真实泄漏;指出长生命周期回调捕获渲染时值造成陈旧闭包,可选用函数式更新、useEffectEvent(非响应式、须从 deps 省略、只能在 effect 内调用)或 ref.current;依赖数组遗漏导致陈旧读取、不稳定引用导致循环,不应禁用 react-hooks/exhaustive-deps;强调晚订阅者会错过已发布值,应订阅后读一次当前值或用 useSyncExternalStore 快照,订阅 API 需返回 unsubscribe。

使用方式:提供 rg 命令快速定位 useEffect、await/.then、ignore/AbortController/signal、addEventListener/subscribe/setInterval/setTimeout/new WebSocket/createObjectURL、eslint-disable exhaustive-deps 等模式,并给出最小有用 PR 示例(两个依赖变化、先发后 resolve 断言新结果胜出,或挂载卸载断言清理)。输出含 Contract、Evidence、Symptom、Fix、Verification 的紧凑发现。

适用场景与限制:适用于手写 useEffect 与裸异步原语;数据层(TanStack Query、SWR、RTK Query、Apollo)的取消与去重归其自身契约,乐观更新回滚、实时连接恢复、IME 组合输入触发等分别归兄弟技能。仅当用户可见或资源契约真被破坏时才提交发现,无影响的 lint 提示不属发现。命令与代码保持原样。