React-hooks弹出上下文-如何？

Question

我做了一个react popup context，在这里你可以使用popupPush函数来推送新的消息，这些消息会以一定的延迟一个接一个地显示出来。你也可以通过点击隐藏当前弹出窗口来查看下一个弹出窗口。一切都很好，除非你同时按下几个弹出窗口，只有最新的弹出窗口才会出现：

  useEffect(() => {
    popupPush({ text: x++ })
    popupPush({ text: x++ })
    popupPush({ text: x++ })

    // eslint-disable-next-line
  }, [])

我该如何解决这个问题呢？或者也许我的整个概念都不是最好的？

Codesandbox working example。

Answer 1

在重新理解react钩子的正确函数和useEffect用法后，我想出了一个可行的解决方案：

Codesandbox example。

大多数情况下，我需要的就是useCallback钩子。这对我来说是意想不到的，它的包装函数不会触发不必要的重现。