如何在useEffect中使用Promise返回的取消订阅函数？

你当前的实现存在逻辑漏洞：useEffect的返回值是同步生成的，而异步函数run内的await promise()是异步执行的，等到promise resolve给unSub赋值时，useEffect早就已经把初始的空函数() => {}作为清理函数返回了，后续清理操作只会执行空函数，无法触发真实的取消订阅逻辑。

useEffect(() => {
  let unSub = () => {}
  let isUnmounted = false

  async function run() {
    const fetchUnSub = await promise()
    if (isUnmounted) {
      // 组件已卸载，拿到取消函数直接执行避免订阅残留
      fetchUnSub()
      return
    }
    unSub = fetchUnSub
  }

  run()

  return () => {
    isUnmounted = true
    unSub()
  }
}, [/* 按业务需求填写正确的依赖项 */])

• 新增isUnmounted标记位，处理promise返回滞后的场景：如果组件卸载后promise才resolve，直接执行返回的取消订阅函数，避免内存泄漏和无效订阅残留
• 清理函数中统一执行当前的unSub，不管是初始空函数还是已赋值的真实取消函数，都不会产生额外副作用
• 必须给useEffect补充正确的依赖数组，避免effect重复执行或逻辑失效的问题

内容的提问来源于stack exchange，提问作者Albert Gao