Automatic Batching: Inconsistent Render Counts Across Event and Timer Callbacks

Which callback types reliably trigger automatic batching in React 18 Concurrent Mode?

With a concurrent root created via createRoot, automatic batching applies to updates issued within a single synchronous callback segment. This includes:

• React synthetic event handlers (onClick, onChange, etc.)
• setTimeout/setInterval callbacks
• Promise .then/.catch/.finally handlers
• Native DOM event handlers attached via addEventListener when they run in the same task

Legacy roots created with ReactDOM.render retain the older behavior where only React synthetic event handlers batch updates.

How does the scheduler's microtask timing affect observable render counts?

Multiple setState calls inside the same callback segment (e.g., one setTimeout handler or one .then block) typically produce one committed render. However:

• Updates split across separate timers (setTimeout calls) or across await boundaries are different scheduling turns and are not guaranteed to batch.
• In concurrent mode, React may begin and abandon render work without committing, so render-function invocations can exceed committed render counts.
• The scheduler may delay the flush until the next microtask; flushSync forces a synchronous commit and breaks batching.

Recommended pattern for consistent batching across React DOM and React Native

1. Colocate related updates in one handler/callback.
2. Use functional updaters (setCount(c => c + 1)) or a single state object/useReducer to express multiple logical changes as one update.
3. Avoid splitting updates across separate setTimeout calls or await points when you need them batched.
4. For updates outside React's normal flow, use the current stable batching primitive for your installed React version/renderer—do not rely on unstable_batchedUpdates (deprecated/unavailable in React 19-era releases).
5. Verify behavior on both platforms: React Native's native UI thread/bridge can batch differently even when JS render counts match.

Verification steps (run in your environment)

// React DOM with createRoot
import { createRoot } from 'react-dom/client';
import { useState, useEffect } from 'react';

function Counter() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  useEffect(() => { console.log('commit', a, b); });
  return null;
}

const root = createRoot(document.getElementById('root'));
root.render(<Counter />);

// Same callback -> expect 1 commit
setTimeout(() => { setA(1); setB(2); }, 0);

// Separate timers -> may produce 2 commits
setTimeout(() => setA(3), 0);
setTimeout(() => setB(4), 0);

// Before/after await -> different scheduling turns
Promise.resolve().then(async () => {
  setA(5);
  await Promise.resolve();
  setB(6);
});

Repeat the same component under React Native and log both JS commits (useEffect) and native view updates. Treat batching as consistent only if both platforms group updates from the same callback segment identically.

Missing diagnostic detail

What exact React version (including minor/patch) and renderer package (react-dom vs react-native) are you targeting? The stable batching API that replaces unstable_batchedUpdates is version-sensitive.