Async handling store state changes to increase performance

[broadsw0rd]

Although react-redux positioning itself like performant solution for connecting react components to the redux store. However it rerender components on each store state changes synchronously,
that can be an issue, if store changes very frequently(proof). So instead of that we can put component, which should be updated, to the queue and with 60 FPS frequency update each component in queue:

var components = [] // list of all connected components(containers)

function digest () {
  for (var i = 0; i < components.length; i++) {
    var component = components[i]
    if (component.shouldHandleStoreStateChange) {
      component.handleChange()
    }
  }
  requestAnimationFrame(digest)
}

digest()

// ...

trySubscribe() {
  if (shouldSubscribe && !this.unsubscribe) {
    this.unsubscribe = this.store.subscribe(this.queueChanges.bind(this))
    this.handleChange()
    components.push(this)
  }
}

queueChanges () {
  this.shouldHandleStoreStateChange = true
}

handleChange() {

  // ...

  this.hasStoreStateChanged = true
  this.shouldHandleStoreStateChange = false
  this.setState({ storeState })
}

Pros

• increases performance up to 1.5x-2.0x and battery live, particularly on mobile devices
• doesn`t patch redux core like redux-batched-subscribe, what prevents
  inconsistency with redux after major releases
• could be optional like pure option

Cons

• harder to test async rendering

But if there is a pitfalls or this solution has no rights to live by another reasons, could you give an advice how to increase performance in this case?

[gaearon]

I wouldn't be comfortable doing something as invasive by default. It makes testing and debugging harder, and introduces potential issues with some browser APIs that expect synchronous updates within an event handler (example: managing an audio tag on iOS).

I would keep it opt in with tools like https://github.com/tappleby/redux-batched-subscribe/. In the future React itself will learn to delay some updates (facebook/react#6170) so longer term this might stop being an issue, and I don't want to break any existing apps that rely on the current synchronous behavior.

[broadsw0rd]

Glad to hear that this issue will be fixed on react level. 👍
And thank you for detailed answer