Is React setState Synchronous or Asynchronous? A Practical Guide

A few days ago I heard colleagues debate whether React's setState is synchronous or asynchronous. After researching, I put together this concise summary.

1. setState: Synchronous or Asynchronous?

The answer depends on the context in which setState is called.

Synchronous contexts : native DOM events and setTimeout.

Asynchronous contexts : React synthetic events and lifecycle hook functions.

2. Batch setState and React's Response

When multiple setState calls are made in the same tick, React batches them and triggers only one re‑render. In the example below, three updates to the same state variable result in a final value of 3 and a single render.

If the batched updates modify different state fields, React merges them and still performs only one re‑render.

3. Correct Way to Get the Updated State

Many developers overlook the second argument of setState, a callback function that runs after the state has been applied. Inside this callback you can safely access the new state.

Using the callback ensures you work with the latest state values.

Overall, this summary captures my current understanding of setState behavior across different scenarios. I have not delved into the source code, so the underlying implementation details remain unexplored. I hope this helps, and I welcome further discussion and contributions.