How do I buffer streamed data with react-hooks (useEffect) to be able to update another component at once to avoid many rerenderings?

Question

How do I buffer streamed data with react-hooks (useEffect) to be able to update another component at once to avoid many rerenderings?

Following information is just additional background for complete understanding.

In the end the overall question is how to reduce highcharts rerenderings by debouncing Apollo-Client graphql subscription with react useEffect hooks

I'm building a react app using apollo-client for data loading. I use graphql subscriptions as the data is lazy and updates live so new data is streamed over. Currently I'm using useEffect which is called once for each new data arriving.

Let's say I have a ui component like a highcharts (concrete HighStock with react-highcharts-official wrapper) diagram which has a long rerendering redrawing time but is able to apply multiple changes at once. Thus I like to reduce redrawing by merging and debouncing so it's updated at once.

What's the smartest way with react hooks to collect data over a certain duration eg extend sliding window with each response by 200ms after some data arrived, but at max extend it to 1s. While a redrawing is ongoing, do not start another redraw. So the diagram is redrawn max once every second if new data arrives, but earlier if no data arrives for a longer time. Apply all changes to Highcharts and render all at once.

With angular and rxjs I would make a mergeMap to provide each data to Highcharts with Chart.setData(data, false) to provide the data without rerendering. If I would collect data over time I would use buffer. In addition would subscribe to a debounce and trottle to redraw the diagram (or emit buffer) after like 200ms without new data but latest redraw every 1s.

Answer 1

This is a reproduction of the issue which you described:

https://codesandbox.io/s/highcharts-react-demo-forked-gtdys?file=/demo.jsx

I think that the best solution, in this case, will be keeping new points in the array and use separate intervals to add them after one second.