SKILL.md
readonly只读
name
react-useeffect
description
来自官方文档的 React useEffect 最佳实践。在编写/审查 useEffect、用于派生值的 useState、数据获取或状态同步时使用。教导何时不应使用 Effect 以及更好的替代方案。
你可能不需要 Effect
Effect 是 React 的逃生舱。它们让你与外部系统同步。如果没有涉及外部系统，你就不应该使用 Effect。
快速参考
| 情况 | 不要 | 要 |
|---|---|---|
| 从 props/state 派生状态 | useState + useEffect |
在渲染期间计算 |
| 昂贵的计算 | useEffect 来缓存 |
useMemo |
| 在 prop 变化时重置状态 | 使用 useEffect 调用 setState |
key prop |
| 用户事件响应 | useEffect 监听状态 |
直接使用事件处理函数 |
| 通知父组件变化 | useEffect 调用 onChange |
在事件处理函数中调用 |
| 获取数据 | 不带清理的 useEffect |
带清理的 useEffect 或框架 |
何时确实需要 Effect
- 与外部系统同步（非 React 小部件、浏览器 API）
- 订阅外部存储（尽可能使用
useSyncExternalStore） - 因为组件显示而运行的分析/日志
- 带有适当清理的数据获取（或使用框架内置机制）
何时不需要 Effect
- 转换数据以进行渲染 - 在顶层计算，自动重新运行
- 处理用户事件 - 使用事件处理函数，你确切知道发生了什么
- 派生状态 - 直接计算：
const fullName = firstName + ' ' + lastName - 链式状态更新 - 在事件处理函数中计算所有下一个状态
决策树
需要对某事做出响应吗？
├── 用户交互（点击、提交、拖拽）？
│ └── 使用事件处理函数
├── 组件出现在屏幕上？
│ └── 使用 Effect（外部同步、分析）
├── Props/state 变化且需要派生值？
│ └── 在渲染期间计算
│ └── 昂贵？使用 useMemo
└── 当 prop 变化时需要重置状态？
└── 在组件上使用 key prop
