如何使用react hook(useEffect(缓冲流式数据，以便能够一次更新另一个组件以避免多次重新渲染？
以下信息仅为完整理解的附加背景信息。
最后，总的问题是如何通过取消Apollo Client graphql订阅和react useEffect挂钩来减少高点重新报价
我正在使用apollo客户端构建一个react应用程序来加载数据。我使用graphql订阅，因为数据是惰性的，并且实时更新，所以新数据是流式传输的。目前我使用的是useEffect，它对每个到达的新数据调用一次。
假设我有一个ui组件，比如highcharts(带有react highcharts官方包装的具体HighStock(图，它有很长的重新绘制时间，但能够同时应用多个更改。因此，我喜欢通过合并和去抖动来减少重绘，这样它就可以立即更新。
使用react hook在一定时间内收集数据的最聪明方法是什么？例如，在一些数据到达后，将每个响应的滑动窗口延长200ms，但最多可延长至1s。正在进行重绘时，请不要开始另一次重绘。因此，如果有新数据到达，图表将被重新绘制，最大值为每秒一次，但如果更长时间没有数据到达，则会更早。将所有更改应用于Highcharts并一次渲染所有更改。
使用angular和rxjs，我会制作一个mergeMap，用Chart.setData(data，false(将每个数据提供给Highcharts，以在不重新渲染的情况下提供数据。如果我要收集一段时间的数据，我会使用缓冲区。此外，在没有新数据的情况下，在大约200ms后，订阅一个去抖动和小跑来重新绘制图表(或发出缓冲区(，但最近一次每1s重新绘制一次。
这是您描述的问题的再现：
https://codesandbox.io/s/highcharts-react-demo-forked-gtdys?file=/demo.jsx
我认为，在这种情况下，最好的解决方案是在数组中保留新的点，并在一秒钟后使用单独的间隔将它们相加。