mcpField
R
react-useeffect-avoid

react-useeffect-avoid

github.com/flpbalada开发28138 次安装13 周前更新
代码仓库

关于 react-useeffect-avoid

这项 React 开发技能说明何时应避免使用 `useEffect`，以及可替代的模式。它区分与外部系统同步和常规应用逻辑。

主要功能

  1. 01`useEffect` 决策树
  2. 02派生状态与事件的替代方案
  3. 03外部系统副作用指南
  4. 04React 19 资源读取示例

适用场景

  1. 01检查用于派生状态的 effect
  2. 02为用户操作选择事件处理器
  3. 03判断集成是否需要 effect

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/flpbalada/my-opencode-config --skill react-useeffect-avoid

安装后在 Claude Code 中输入/react-useeffect-avoid确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

context/
anti-patterns.md
decision-tree.md
patterns-to-avoid.md

详细介绍

React：何时不应使用 useEffect

核心原则

useEffect 是用于与外部系统同步的逃生通道，而不是通用的状态管理或事件处理工具。

现代 React 模式优先采用单向数据流和事件驱动更新，而非基于 effect 的同步，以避免性能损耗和复杂的同步错误。

决策树

Need to sync with external system?
├─ Yes (browser APIs, websockets, timers)
│  └─ Use useEffect
│
└─ No (pure React application logic)
   ├─ Derived state calculation?
   │  ├─ Yes → Calculate during render
   │  └─ No → Continue...
   │
   ├─ User action triggered?
   │  ├─ Yes → Use event handler
   │  └─ No → Continue...
   │
   ├─ State reset needed?
   │  ├─ Yes → Use key prop
   │  └─ No → Continue...
   │
   └─ Really need effect after re-think?
      └─ Yes → Use useState/useReducer/setState pattern

快速参考

❌ 不要将 useEffect 用于：
场景问题替代方案
派生状态双重渲染在渲染期间计算
重置状态数据过时使用 key 属性
用户操作意图丢失事件处理程序
列表筛选额外渲染在渲染期间筛选
浏览器 APItearing 错误（并发场景）useSyncExternalStore
提交表单脆弱的标志位模式直接使用异步处理程序
获取数据需要手动管理缓存React Query、SWR、Suspense
✅ 应将 useEffect 用于：
  • 订阅外部系统（WebSocket、浏览器 API 等）
  • 设置需要清理的计时器
  • 管理第三方库集成
  • 更改文档标题
  • 渲染完成时进行分析/遥测

React 19：新替代方案

// React 19+ - Direct resource reading
function UserProfile({ userId }) {
  const user = use(fetchUser(userId)); // Reads promise directly
  return <div>{user.name}</div>;
}

渐进式展开

主题文件适用场景
带示例的反模式context/anti-patterns.mduseEffect 错误用法的详细代码示例
应始终避免的模式context/patterns-to-avoid.md日志记录、DOM 操作等常见反模式
决策树与参考资料context/decision-tree.md快速查阅和延伸阅读

参考资料

评论

支持 Markdown