Skip to content

CONCEPT Cited by 1 source

State batching

Definition

State batching is the rendering-pipeline property of collapsing multiple setState calls within the same logical update into a single render pass. The intermediate state values between those setState calls are not observable by any rendered component — only the final state after the batch is applied.

In React Native's new architecture (Fabric), state batching is part of the synchronous rendering model. The old architecture's async rendering also batched sometimes, but less aggressively; the new architecture's behavior is more uniform and more aggressive.

The failure mode

Components that depend on observing intermediate state values break under batching.

Example pattern (simplified from Shopify's writeup):

setState({ step: 1 });   // intent: trigger side-effect A
setState({ step: 2 });   // intent: trigger side-effect B

In the old architecture, a useEffect keyed on step might have fired twice — once with step: 1, once with step: 2 — and some components relied on the intermediate fire. Under batching, step: 1 is never observed; the component jumps directly from the previous state to step: 2, and the intermediate side effect never runs.

Shopify's framing: "Some components that worked before relied on intermediate state values that no longer exist due to batching, causing them to break. This type of tech debt happens naturally in large codebases and the migration provides an opportunity to clean it up."

See sources/2025-09-12-shopify-migrating-to-react-natives-new-architecture.

The fix

There is no automatic fix; this is a refactor. The migration is an opportunity to rewrite these components to not depend on specific state-update timing — i.e., express the same behavior as a function of the final state, a reducer over actions, or an explicit event emission independent of state.

Most correctly-written React code doesn't hit this; it's specifically code that leaks implementation assumptions about the renderer's ordering. The migration surfaces this tech debt, and addressing it makes the code more robust under future React changes too.

Net-positive rendering effect

Batching is a performance win: fewer render passes, fewer reconciliations, fewer unnecessary re-renders. Shopify reported that "the new batched state reduced unnecessary re-renders, which made things like tab switching snappier" as one of the immediate Fabric wins.

Last updated · 470 distilled / 1,213 read