React State Update Queues

React does not immediately apply every state setter call to the rendered UI. Instead, updates are queued and later processed during rendering, with ordering and priority affecting which updates are applied.

A call such as `setCount(1)` requests a state change; it does not mean the `count` variable in the current render changes immediately. React records the update and schedules work to produce a later render.

When several updates occur before React renders, React can process them together. This batching reduces unnecessary renders and means code should not assume that reading a state variable immediately after calling its setter will return the new value.

The form of the update matters. A value update such as `setCount(5)` replaces the pending state with that value when processed. A functional update such as `setCount(c => c + 1)` receives the state produced by the preceding update, making it the appropriate form when multiple updates depend on the previous state.

In concurrent rendering, React can assign updates different priorities. Internally, React uses lanes to represent priority and scheduling information. Higher-priority work can be processed before lower-priority work, while lower-priority work may be deferred or interrupted and later resumed.

The important interview distinction is between requesting an update and observing its result. The current render remains a snapshot, while the queued updates are processed to calculate a future state and render.

Key points

• State setters enqueue work rather than synchronously changing the current render's state.
• React may batch multiple state updates into one render.
• Use functional updates when the next state depends on the previous state.
• Queued updates are processed in order, and their form affects the resulting state.
• Concurrent React uses priority information, represented internally by lanes, to schedule work.

Interview questions

What happens when you call a React state setter?

The setter schedules a state update rather than synchronously changing the state value in the current render. React records the update and later processes it during rendering. The component then receives a new state snapshot in a subsequent render.

Why would you use a functional state update?

A functional update is useful when the next value depends on the previous value. React calls the updater with the state value produced by the updates processed before it. This lets multiple increments compose correctly even when they are queued before a render.

Does calling a state setter immediately update the variable in the current function?

No. The state variable belongs to the current render and behaves like a snapshot for that render. Calling its setter requests another render with updated state. Code running in the current render or event handler should therefore not expect the captured variable to change immediately.

How does batching relate to state update queues?

Batching lets React process multiple state updates together rather than necessarily rendering after every setter call. The queued updates can still be processed individually to calculate the final state. For example, two functional increments can both contribute to one resulting render.

What role do lanes play in concurrent React?

Lanes are an internal mechanism React uses to represent scheduling priority for updates. They allow React to distinguish work that should receive attention sooner from work that can wait. This supports concurrent rendering by allowing lower-priority work to be deferred or interrupted when more urgent work needs processing.