用途
本技能提供 React useEffect 的最佳实践，内容源自官方文档，适合在编写或审查 useEffect 代码时参考，也适用于处理派生值、数据获取或状态同步等场景。其核心结论是：你可能并不需要 Effect。
主要理念
Effect 是 React 的逃生舱，用于与外部系统同步。如果不涉及任何外部系统，通常就不需要 Effect。
快速参考
资料给出以下情况下的“不要做”与“应做”对照：
- 从 props/state 派生状态：不要用 useState + useEffect，应在渲染期间计算。
- 昂贵计算：不要用 useEffect 缓存，应使用 useMemo。
- props 变化时重置状态：不要用 useEffect 配合 setState，应使用 key prop。
- 用户事件响应：不要用 useEffect 监听 state，应直接在事件处理器中处理。
- 通知父组件变更：不要在 useEffect 中调用 onChange，应在事件处理器中调用。
- 获取数据：不要使用没有清理逻辑的 useEffect，应使用带清理的 useEffect 或框架内置机制。
何时确实需要 Effect
- 与外部系统同步（非 React 组件、浏览器 API）。
- 订阅外部存储（尽可能使用 useSyncExternalStore）。
- 因组件显示而运行的分析或日志记录。
- 带正确清理逻辑的数据获取（或使用框架内置机制）。
何时不需要 Effect
- 为渲染转换数据：在顶层计算即可，会自动重新运行。
- 处理用户事件：使用事件处理器，因为你能明确知道发生了什么。
- 派生状态：直接计算，例如 const fullName = firstName + ' ' + lastName。
- 链式状态更新：在事件处理器中计算所有下一个状态。
决策树
资料提供的决策流程如下：
- 需要响应某事？
- 用户交互（点击、提交、拖拽）？使用事件处理器。
- 组件出现在屏幕上？使用 Effect（外部同步、分析）。
- props/state 变化且需要派生值？在渲染期间计算；如果昂贵，使用 useMemo。
- 需要在 prop 变化时重置状态？在组件上使用 key prop。
详细指导
资料还包含反模式（常见错误及修复方式）与更好的替代方案（useMemo、key prop、状态提升、useSyncExternalStore）。
限制
资料未提供具体的安装命令、代码示例细节、支持的平台或版本等信息。