React中存在多个相同依赖的useEffect是否属于不好的写法？

两者的核心区别 #

• 执行与清理逻辑差异
  执行阶段两种写法输出完全一致，都是先打印1再打印2，差异出现在组件卸载的清理环节：拆分写法的useEffect会按照定义的逆序执行各自的清理函数，合并写法只会执行一次统一的清理逻辑。比如两个拆分的useEffect都定义了return清理回调，卸载时会先执行第二个effect的清理逻辑，再执行第一个的。
• 性能开销差异
  拆分写法会让React多存储一份effect的回调、依赖项引用，运行时也会多执行一次effect触发校验，这部分开销极低，常规业务场景下完全感知不到，只有当effect数量达到几十上百量级时才会出现可观测的性能影响。
• 语义耦合差异
  拆分写法天然实现了逻辑隔离，每个effect对应一个独立职责；合并写法默认逻辑是强关联的，这是两种写法最大的设计层面差异。

最佳实践推荐 #

没有绝对通用的最优写法，核心判断标准是逻辑的关联性：

• 如果多段逻辑完全独立，推荐拆分写：符合单一职责原则，后续维护成本更低。比如一个effect负责拉取页面初始数据，另一个负责初始化第三方统计SDK，哪怕依赖项完全相同，也应该拆分，后续调整某一段逻辑的依赖时不会互相干扰。
  示例场景：

  // 两个独立逻辑，拆分后语义更清晰
  useEffect(() => {
    fetchUserList().then(res => setUserList(res))
  }, [])
  useEffect(() => {
    initBuriedPoint()
    return () => destroyBuriedPoint()
  }, [])
  

• 如果多段逻辑强相关，属于同一个操作的不同步骤，推荐合并写：既符合语义，也能避免拆分后遗漏关联清理逻辑的问题。比如初始化地图实例后绑定多个地图交互事件，合并到同一个effect里更合理。
  示例场景：

  // 同属地图初始化的关联逻辑，合并更合理
  useEffect(() => {
    const mapInstance = initMap(containerRef.current)
    mapInstance.on('zoom', handleZoomChange)
    mapInstance.on('move', handleMapMove)
    return () => mapInstance.destroy()
  }, [])
  

内容的提问来源于stack exchange，提问作者Minseo Lee