React useEffectEvent 如何解决 Effect 依赖地狱？

Question

仓乃文 · Accepted Answer

Effect 中使用了某个函数但不想把它加入依赖数组时，useEffectEvent 可以创建一个「始终能读取最新 props/state」的事件处理函数，不需要加入依赖数组，避免 Effect 频繁重新执行。

问题场景：
```javascript
function Chat({ roomId, onMessage }) {
  // 问题：onMessage 变化导致 Effect 重新执行，重新连接
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on("message", (msg) => onMessage(msg));  // 用了 onMessage
    return () => connection.disconnect();
  }, [roomId, onMessage]);  // onMessage 变化 → 重连
}
```

useEffectEvent 方案：
```javascript
function Chat({ roomId, onMessage }) {
  const onMessageEvent = useEffectEvent(onMessage);  // 始终读取最新 onMessage
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on("message", (msg) => onMessageEvent(msg));  // 不需要加入依赖
    return () => connection.disconnect();
  }, [roomId]);  // 只在 roomId 变化时重连
}
```

补充说明：
- useEffectEvent 返回的函数始终能读取最新的 props 和 state，但引用稳定
- 不要在渲染期间调用 useEffectEvent 返回的函数，只在 Effect 和事件处理中调用
- useEffectEvent 是 React 19 实验性 API，目前需要从 react 中 import
- 本质上是 useRef + 重新赋值的语法糖，但语义更清晰
- 适用场景：Effect 需要读取最新值但不希望该值变化时重新执行 Effect