useEffect的一些优化原则

在使用 useEffect 前思考这个副作用做了什么、有哪些依赖、它的依赖为何变化以及为何需要在此处响应这些变化。 例如当依赖变化源自于用户事件，那么完全没有必要使用副作用来处理而是应该使用事件处理器。

尽量避免使用 useEffect

• 派生数据直接计算
• 使用类似于 usePrevious 的 hook 来响应变化
• 合理的使用 key 来标识整个组件
• 使用事件处理器来代替 useEffect
• 在渲染期间计算状态，在事件处理器中更新状态
• useEffect 中的逻辑与组件重渲染无关时应把这些逻辑移到组件外部
• 为了保持状态同步而调用父组件的方法时应考虑提升这些状态
• 使用 useSyncExternalStore 来处理外部订阅，使用第三方请求库来实现数据请求

使用 useEffect 时应尽量减少依赖（但不要故意忽略依赖）

• 依赖应符合 useEffect 中的代码，通常是组件内部的响应值，移除依赖前应该先更改代码
• 考察 useEffect 的功能，评估其中的逻辑是否属于用户事件或其它事件，如果是则需要将其抽离
• 一个 useEffect 只做一件事情，否则应尽可能将其拆分成不同的 useEffect
• 在 useEffect 中更新数据时使用 callback 的形式而不是依赖外部的最新值
• 使用 useEffectEvent 来包装方法或者抽离部分逻辑
• 尽量避免将对象或方法作为依赖，尝试将它们放到组件外部或者 useEffect 内部，或者通过对象解构或者在外部运行依赖的方法从而实现使用基本类型作为依赖
• 有时只是为了读取最新值而不需要响应其变化可以使用 useEffectEvent 或者 useRef

最后别忘了考察 useEffect 在重新运行或者组件结束前是否需要清理