Bug: state updates in ResizeObserver callback are not batched, causing multiple re-rendering of component

[szhsin]

React version: 17.0.2
Browser: recent versions of Chrome/Safari/Firefox

Steps To Reproduce

1. Write multiple state updates in ResizeObserver callback.
2. Cause observer target to change size.

Link to code example: https://codesandbox.io/s/resizeobserver-not-batch-state-update-6rb6y

The current behavior

Each state update in ResizeObserver callback leads to an individual re-rendering of component.
In my example, calling addCounter() three times in ResizeObserver callback results in the component being re-rendered three times.
In contrast, calling addCounter() three times in button onClick event causes only a single re-rendering of component.

The expected behavior

Multiple state updates in ResizeObserver callback are batched and cause a single re-rendering of component, which helps improve performance.

[bvaughn]

React automatically batches state updates inside of even handlers registered via React to avoid unnecessary intermediate update work. React can do this because it calls the event handler (your code). This allows it to wait to process the updates until your code has finished running (when your event handler is done) and there are no more pending updates.

The example you provided is using a ResizeObserver which is more akin to window.addEventListener in that React is not involved anywhere in the call stack. (When you schedule an update, React doesn't know how long to "wait" to see if there's another one.)

A future release of React (often referred to as "concurrent mode") will automatically batch state updates in more cases like this using a mechanism like a microtask. You can see this here:
https://codesandbox.io/s/resizeobserver-not-batch-state-update-forked-j6hmy?file=/src/index.js

[markerikson]

Also see my longer description of how batching works at https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#render-batching-and-timing .

[szhsin]

Thanks @bvaughn @markerikson for the explanation, looking forward to the release of Concurrent Mode.