What is the use of batch()?

[binarybehemoth]

I am trying to explain the React-Redux batch() function on my website. In order to do so, I need a counterexample without using batch() so that the reader can see the difference. However, as you can see here on CodeSandbox, I couldn't get the counterexample to work, as batching occurred even without calling batch(), ie. the number is incremented by two instead of one at a time.

[markerikson]

You're using React 18, which now always does batching automatically. But, React 17 and earlier did not do that:

reactwg/react-18#21

[100terres]

Hi @markerikson 🙂 Do you think there's a way to disable the batching when using react-redux and react v18? I would like to make sure to re-render everytime an action is dispatched.

[markerikson]

Mmm... there's the new ReactDOM.flushSync() API, which would force React to update the DOM immediately. But, generally that's not a thing you should be reaching for very much.

What particular problem are you trying to solve there?

[100terres]

Hi @markerikson,

I'm maintaining a fork of an un-maintained project.

I do not have the full context behind the implementation, but it's a drag and drop library and there are a lot of actions dispatched. Some actions are dispatched one after the other and on some of these actions we get layout/style information directly on DOM elements to be able to do calculations and then dispatch another action.

It works with React 17, but with React 18 it does not behave as expected. I suspect that it's related to the new batching feature. That's why I'm trying to find a way to make sure the DOM is updated on each action dispatched. I've seen the new flushSync API, but I'm not sure how to make it work with react-redux.

[markerikson]

That's... a good question.

At a bare minimum, it would need to be something like:

ReactDOM.flushSync(() => {
  dispatch(someAction())
})

However, given that React-Redux in turn does its own store setup and batch usage after the store notifies the UI, I'm not sure if that will actually do what you want it to.