use-react-effect

教 AI 正确判断、实现、重构和审查 React Effect 的 Codex Skill。

它不主张机械地删除所有 useEffect，而是要求先区分：代码是在响应一次具体事件，还是在让 React 与外部系统保持同步。

能力

• 判断 Effect 应保留还是删除
• 识别派生状态、事件中转、监听式业务逻辑等滥用
• 正确处理依赖、闭包、清理和 Strict Mode
• 处理请求竞态、取消和过期响应
• 按项目 React 版本决定是否使用 useEffectEvent
• 给出最小且保持行为不变的重构方案

安装

git clone https://github.com/dream-image/use-react-effect.git
mkdir -p ~/.codex/skills
cp -R use-react-effect/skill/use-react-effect ~/.codex/skills/

安装后的入口文件应位于：

~/.codex/skills/use-react-effect/SKILL.md

使用

$use-react-effect 审查这段 React 代码中的 Effect，并修复不合理用法。

该 Skill 也会在涉及 useEffect、useLayoutEffect、useEffectEvent、依赖数组、闭包、订阅、定时器和客户端请求时自动触发。

核心原则

1. Effect 用于让 React 与外部系统同步。
2. 用户操作引发的逻辑优先放在事件处理函数中。
3. 能在渲染阶段计算的数据不要通过 Effect 写入 state。
4. 依赖由 Effect 读取的响应式值决定，不能人为隐瞒。
5. setup 与 cleanup 必须对称，并能通过 Strict Mode 的重复挂载检查。
6. 原始客户端请求必须处理取消和竞态。

详细规则见 React Effect 使用指南。

参考资料

• useEffect
• You Might Not Need an Effect
• Separating Events from Effects
• useEffectEvent
• 为什么我们要删掉 100% 的 useEffect