具有变化太快的依赖项的 useEffect

Question

这是问题所在：

function Foo(){
  let [events, setEvents] = useState([])

  useEffect(() => {
    let subscription = client.subscribe("eventType", event => {
      setEvents([...events, event])
    })
    return () => subscription.unsubscribe()
  }, [events])
}

所以在这里，如果我使事件成为 useEffect 依赖项，它会在每次添加事件时取消订阅/订阅，我会错过一些。我可以将事件作为参考，但它不会重新呈现。

正确的做法是什么？

编辑： 从到目前为止我得到的评论/答案来看，似乎没有什么好的方法可以在 React 中处理这个问题。我有一个丑陋的 setInterval 解决方案，如果 2 天内没有人提出更好的解决方案，我将 post 作为答案。

编辑 2： 这里有一个 codesandbox 显示了 setInterval 的问题。我正在寻找不需要事件作为依赖项的解决方案（显然，删除事件依赖项不是解决方案。）

Answer 1

您可以 pass a callback to setEvents that will receive the current value for events:

而不是从 useEffect 外部获取 events

function Foo(){
    let [events, setEvents] = useState([])

    useEffect(() => {
        let subscription = client.subscribe("eventType", event => {
            setEvents((previousEvents) => [...previousEvents, event])
        })
        return () => subscription.unsubscribe()
    }, []) // no need to add `events` to dependencies because we're getting it from `setEvent`'s callback
}

具有变化太快的依赖项的 useEffect

useEffect with a dependency that changes too fast

reactjs

use-effect

use-state

use-ref