I need help

[spider-dev-AI]

Why does React batch state updates, and when can batching fail?

[tommyliu-95518]

React batches state updates to minimize re-renders, improving performance by grouping many changes into a single render and commit cycle.
Batching keeps renders logically consistent, ensuring components see a stable snapshot of state instead of flickering through intermediate partial changes.
It appears to fail when you read state immediately after calling setState, because updates apply after React finishes rendering later.
Batching can also break with flushSync, separate event or timeout tasks, or older React versions where async events weren’t batched

[icyJoseph]

This is about consistency.

• https://react.dev/learn/queueing-a-series-of-state-updates#react-batches-state-updates
• https://dev.to/this-is-learning/the-cost-of-consistency-in-ui-frameworks-4agi

makes your React app run much faster. It also avoids dealing with confusing “half-finished” renders where only some of the variables have been updated.

React does not batch across multiple intentional events like clicks—each click is handled separately.

Consistency in frameworks is important. It builds trust. You know when you interact with the view what you see is what you get. If the user sees something but the state of the app is different, that can lead to obscure bugs because user-driven actions can cause unexpected results while appearing intentional

There's a lot of misconceptions regarding batching. Batching is not the reason why you can't like, read an update as you call setState, for example in:

const [ counter, setCounter ] = useState(0);
// later in a click handler
setCounter(counter + 1)
console.log(counter)
setCounter(counter + 1)

Here we all know by now that this setCounter to exactly, 1, and logs 0, even fi you flushSync. This has nothing to do with batching and it is all about just JavaScript closures.

// with counter at 0
setCounter(0 + 1)
console.log(0)
setCounter(0 + 1)

That's what you are doing there. Where you can see batching is in cases like:

// later in a click handler
if (/* a given condition */) {
  setCounter(counter + 1)
}
// later in the same handler
if (/* some other condition */) {
  setCounter(counter * 2 + 1)
}

At the end of the event handler, the batched updates are simplified into one, and the last relevant one applies. Keeping the application view consistent with your logic. Where you might want to flushSync, is if you also want to show the + 1 UI result, but then still show the other double plus one. Very few, if any, UI uses that.

If there's real interested in this question beyond farming answers for bots:

In React 17

function App() {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(false)

  function handleClick() {
    setLoading(true);
    fetchSomething().then((result) => {
      // React 17 and earlier does NOT batch these because
      // they run *after* the event in a callback, not *during* it
      setLoading(false) // Causes a re-render
      setData(result) // Causes a re-render
    });
  }
  if (loading) return <p>Loading...</p>

  return <p>{data?.uuid}</p>
}

In React 17, setData and setLoading, would not be batched, so you'd actually see a frame with nothing in the screen, with data null. This used to harmless, but in some case, might lead to crashing UI, for example if I had not done data?.uuid and instead did data.uuid, that'd read from uuid from null in one render pass.

In React 18, this was changes, so that now these are batched too! And you don't have that extra frame.

• Automatic batching for fewer renders in React 18 reactwg/react-18#21
• https://codesandbox.io/p/sandbox/competent-satoshi-5wvqtk?file=%2Fsrc%2FApp.js%3A21%2C34 live demo showing how the UI could crash in the snippet above

The crash in React 17 and before would be prevented by switching the order of calls:

      setData(result) // Causes a re-render
      setLoading(false) // Causes a re-render

But that's extremely brittle and not a good pattern to have around...