React useEffectEvent 怎样读取最新值而不重复注册副作用

我在给页面加定时刷新和指针监听时，遇到过一个很典型的现象：只是修改了一个显示选项，计时器却被清理又注册，外部连接也跟着重连。React 官方给出的解决方向是把“真正决定副作用是否重建”的依赖，和“回调执行时只需要最新值”的逻辑拆开。

官方地址：https://react.dev/reference/react/useEffectEvent

具体做法是：Effect 继续依赖 roomId、delay 这类会改变资源关系的值；回调里只读取最新的 theme、muted 或 increment 时，用 useEffectEvent 包起来。这样不会因为非反应式值变化而重复注册，但调用发生时仍能看到最新提交的值。

先分清哪些变化应该重建 Effect

先看一个容易写出的版本。下面的监听器真正关心的是窗口事件本身，但回调还读取了 canMove。如果把 canMove 放进依赖数组，每次勾选开关都会移除并重新添加监听器；如果把它删掉，又可能读到闭包里的旧值。

import { useEffect, useState } from 'react'

export default function PointerDot() {
  const [canMove, setCanMove] = useState(true)
  const [position, setPosition] = useState({ x: 0, y: 0 })

  useEffect(() => {
    // 这个回调依赖最新的开关状态，但监听器本身不需要反复注册
    function onMove(event) {
      if (!canMove) return
      setPosition({ x: event.clientX, y: event.clientY })
    }

    window.addEventListener('pointermove', onMove)
    // 组件卸载或依赖变化时，必须移除同一个函数引用
    return () => window.removeEventListener('pointermove', onMove)
  }, [canMove])

  return null
}

这段代码并非一定错误：如果监听器的注册本来就应该随 canMove 变化，那么保留依赖是正确的。问题在于，当资源关系不变、只有回调里的判断值变化时，重复注册就是额外成本。

用 useEffectEvent 保留最新值

把只需要在事件发生时读取的逻辑移到 useEffectEvent 中，Effect 就可以只依赖真正决定监听器生命周期的值。下面的监听器只在组件建立时注册一次，但 canMove 每次渲染更新后，回调仍会读取最新值。

import { useEffect, useEffectEvent, useState } from 'react'

export default function PointerDot() {
  const [canMove, setCanMove] = useState(true)
  const [position, setPosition] = useState({ x: 0, y: 0 })

  const onMove = useEffectEvent((event) => {
    // Effect Event 在真正被调用时读取最新的 canMove
    if (!canMove) return
    setPosition({ x: event.clientX, y: event.clientY })
  })

  useEffect(() => {
    // 监听器属于 Effect，注册关系不由 canMove 触发重建
    window.addEventListener('pointermove', onMove)
    // 清理函数与注册函数保持同一引用，避免监听器泄漏
    return () => window.removeEventListener('pointermove', onMove)
  }, [])

  return null
}

这里的空依赖数组不是“忽略所有依赖”的写法。它表达的是：这个 Effect 的外部资源只有窗口监听器本身；canMove 属于监听发生时才读取的非反应式逻辑。若监听目标改成某个 roomId 对应的连接，就应把 roomId 留在依赖数组中。

同样的拆分也适合计时器。delay 决定计时器是否需要重建，increment 只决定每次触发时加多少：

function useInterval(callback, delay) {
  const onTick = useEffectEvent(callback)

  useEffect(() => {
    if (delay === null) return
    // 计时器只由 delay 管理，回调内部读取最新业务状态
    const id = setInterval(() => onTick(), delay)
    // delay 改变或组件卸载时释放旧计时器
    return () => clearInterval(id)
  }, [delay])
}

调用位置和清理边界不能省

useEffectEvent 返回的函数不是普通的稳定事件处理器。React 官方明确要求它只能在 Effect 或其他 Effect Event 中调用，不能在渲染期间直接执行，也不应该传给子组件当作通用回调。

function ChatRoom({ roomId, muted }) {
  const onConnected = useEffectEvent(() => {
    // 连接成功时读取最新的 muted，但不让静音开关触发重连
    if (!muted) showNotification('连接成功')
  })

  useEffect(() => {
    const connection = createConnection(roomId)
    // 外部连接由 roomId 决定，连接成功回调由 Effect Event 处理
    connection.on('connected', onConnected)
    connection.connect()
    // roomId 改变或组件卸载时断开当前连接
    return () => connection.disconnect()
  }, [roomId])

  return null
}

注意三点：第一，roomId 仍然是依赖，因为它改变时必须换连接；第二，不要把 onConnected 放进依赖数组，Effect Event 的函数身份并不保证稳定；第三，仍要保留断开连接或移除监听器的清理逻辑。

什么时候不要使用 useEffectEvent

它不是为了让依赖数组变短而设计的。如果某个值改变后，业务上就应该重新订阅、重新连接或重新计算，那么这个值必须继续放进 Effect 依赖数组。把它藏进 Effect Event 会让代码看似稳定，却漏掉真正需要的同步。

我自己的判断顺序是：先问“这个变化是否应该改变外部资源”，如果答案是应该，就保留依赖；如果只是资源事件发生时要读取最新设置，再考虑 useEffectEvent。这样既能避免无意义的重复注册，也不会用新 API 掩盖真正的同步关系。

相关问题

useEffectEvent 能不能替代 useCallback？

不能直接替代。useCallback 适合需要传给子组件或普通事件处理器的回调；useEffectEvent 专门用于 Effect 内部触发、需要读取最新值但不希望重新同步的逻辑。

为什么 useEffectEvent 不应该写进依赖数组？

它的函数身份并不保证稳定，官方建议不要把它当成普通依赖。Effect 应该依赖真正决定外部资源生命周期的值。

空依赖数组是不是就安全了？

不一定。只有当外部资源确实不随渲染值变化，而变化的值只是由 Effect Event 在触发时读取时，空依赖数组才符合语义；否则应补上真实依赖。