Huge performance issue when dispatching hundreds of actions

On boot, the app I’m building gets a stream of data from a server. This stream can have hundreds of messages and entities and each message is handled separately.

It takes a tremendous amount of time to dispatch actions after UI has rendered, because every state change re-renders the @connected component.

I wrote a short example that shows dispatching 1000 actions before render (5-15ms) and 500 after render (~2.5s). So this is clearly not a redux issue.

https://jsbin.com/ruziwa/edit?js,console,output

Obviously component doesn’t need to re-render every single dispatched action, but re-rendering should be throttled (say, every 50ms). Is there an established approach for that or does it need to be integrated in @connect?

[elado]

Well, adding

ItemListContainer.prototype.render = _.throttle(ItemListContainer.prototype.render, 20)

really boosts performance.

Updated https://jsbin.com/ruziwa/11/edit?js,console,output

Probably messing with React’s methods is not the right approach though.

[esamattis]

Probably messing with React’s methods is not the right approach though.

Yeah that will break sooner or later…

pseudo code

var store = createStoreWithBatchMiddleware();
var messages = [];

stream.on("message", msg) => messages.push(msg));

setInterval(() => {
  messages.forEach(msg => store.dispach(handleMessage(msg)));
  messages = [];
}, 50);