How do batched updates work?

[OliverJAsh]

I am curious whether React Redux utilises batched updates in any way. I want to know whether I need to be worried about multiple render cycles happening when dispatching a single action. There are a few other issues concerning this, however they appear to be related to the old version of this library, and they don't detail the exact workings.

Here is my current understanding. Please tell me where I am wrong!

Each instance of Connect will call its onStateChange method when the Redux state changes, which internally will call setState if the props have changed.

This means we will be calling setState for many instances of the Connect component, all within the same call frame.

As far as I understand it, React only implements batching for multiple setState calls in the same event handler sequence. In our case, the setState calls happen outside of an event handler, so each instance of Connect which needs updating will trigger its own render cycle when calling setState.

Do I understand correctly? I don't believe I do, because in my own profiling it appears there is only one render cycle…

[OliverJAsh]

After further testing, I think I understand the situation better now. Please correct me where I'm wrong.

We only call setState on the common ancestor of all connected components. Because of this, we avoid multiple render cycles. For example, given a component tree of:

Connect(Parent)
  Connect(Child)
  Connect(Child)

When Redux state changes, we only call setState for ConnectedParent. This triggers a re-render of all child components, but importantly, within the same render cycle.

However, if connected components do not have a common ancestor:

UnconnectedParent
  Connect(Child)
  Connect(Child)

In this case, setState will be called for both connected child components, and because these calls to setState occur outside of an event handler, they will not be batched and thus we will cause multiple render cycles:

https://stackblitz.com/edit/react-ts-vw6ske?file=index.tsx

In this case it might make sense to use something like redux-batched-subscribe to wrap the call to dispatch (and thereby all setStates) in a ReactDOM.unstable_batchedUpdates.

[timdorr]

This will be irrelevant in a post-async world under React 17. There's a reason batched updates are marked as unstable 😄

But without a stable API to build on, this is not something we should build into the library. Luckily, React is solving the problem for us, so this will be a non-issue in the relatively near future.

[OliverJAsh]

Hi @timdorr, I'm aware of the forthcoming async rendering. I was just keen to understand how things work/should work in the world today.

Is my explanation correct?

[timdorr]

Yes.