What happens when you call setState?

1
The state property is updated in a React component with the object passed into setState, and this is done asynchronously.
2
It tells React that this component and its children need to be re-rendered, but React may not do this immediately (it may batch these state update requests for better performance).
3
The first thing React will do when setState is called is merge the object you passed into setState into the current state of the component. This will kick off a process called reconciliation. The end goal of reconciliation is to, in the most efficient way possible, update the UI based on this new state.
4
To do this, React will construct a new tree of React elements (which you can think of as an object representation of your UI). Once it has this tree, in order to figure out how the UI should change in response to the new state, React will diff this new tree against the previous element tree.
5
By doing this, React will then know the exact changes which occurred, and by knowing exactly what changes occurred, will able to minimize its footprint on the UI by only making updates where absolutely necessary.

Difficulty: 5/10

Topics: state batching, asynchronous updates, reconciliation

0-2 years experience

1
You have a class component with a button that calls this.setState({count: this.state.count + 1}). After the click, what does the UI show immediately and why?
2
If you call setState twice in a row with different objects, which value ends up in state and what does React do under the hood?

2-5 years experience

1
A teammate reports that a state update inside an event handler isn’t reflected in the next line of code. Walk me through why setState is asynchronous and how you’d fix the bug.
2
You notice UI lag when calling setState inside a setTimeout. Explain what happens when setState runs and how you’d diagnose the performance issue.

5-8 years experience

1
You’re optimizing a large list component that re‑renders on every setState. Describe how React’s batching and reconciliation work and what strategies you’d use to cut unnecessary renders.
2
When a component receives rapid prop changes, how do you prevent stale closures with setState? Discuss using the functional updater form and its impact on rendering.

8+ years experience

1
Our legacy codebase uses many class components with setState. How would you plan a migration to functional components with hooks while preserving behavior and performance?
2
In a micro‑frontend architecture, some teams use a global Redux store while others keep local state with setState. What are the trade‑offs of mixing these approaches at scale, and what guidelines would you establish?