TOPIC OVERVIEW

react/useState

The hook that gives a function component its own persistent, re-render-triggering value.

10 QuestionsIntermediateHigh Priority ~10 min read

useState returns a [value, setter] pair, with the value persisting across re-renders via storage attached to that component's fiber rather than living in the function body (which gets recreated every render). Calling the setter schedules a re-render — it doesn't update the variable synchronously within the same render, which is why reading the state variable immediately after calling its setter still shows the old value.

The functional updater form — setCount(prev => prev + 1) instead of setCount(count + 1) — matters specifically when the next state depends on the previous one and multiple updates might be batched together; using the direct value can read a stale closure of the current state, while the functional form always receives the most up-to-date value React has. React 18 also extended automatic batching to group state updates from promises, timeouts, and native event handlers into a single re-render, not just React's own synthetic event handlers as before.

What you'll walk away knowing

Why useState persists a value across renders without needing anything outside the component

When to use the functional updater form (setX(prev => ...)) instead of passing a direct value

Why calling the setter doesn't update the state variable synchronously within the same render

How automatic batching in React 18 changed which updates get grouped into a single re-render

1What is the purpose of the `useState` hook in React?ExpertHigh 2What if we call set function multiple times in a function?ExpertHigh 3What is the correct way of passing the initialiser function to useState?ExpertHigh 4List some good practices while using stateExpertHigh

All Topics