Bursts of data, redux buffering / react rerenderin

Question

Here is my data flow:

1: 500+ objects come trough socket in 1-2s bursts

2: Objects are added directly to redux store

3: React table container is connected to redux store (using it as data source) and re-renders for every object.

That many re-renders pretty much kill browser.

What options do I have to buffer incoming objects(events) and send batches to reducer every, say 1s? Even better solution would be to somehow time-limit react rendering (shouldComponentUpdate...), but I doubt it's possible?

Answer 1

I would advise looking into RxJS and redux-observable specifically. What you're looking for is debounce operator if I'm not mistaken.

RxJS has a pretty steep learning curve, but I have managed to set up a basic working solution pretty quickly.

I have been inspired by this talk and I encourage you to take a listen.

Answer 2

You could use a temporary cache in the reducer as local data. Maybe with a timeout before adding the data to the store object.

Answer 3

You can implement your own throttle behavior using setTimeout in shouldComponentUpdate or use something ready like https://github.com/ryo33/react-throttle-render