Explain how the useState hook works in React. Why should you never modify state directly?

Question

Accepted Answer

useState adds local state to a function component. You call it with an initial value and it returns a pair: the current value and a setter function. Calling the setter tells React the component needs to re-render, and on that next render useState returns the updated value.

React keeps state outside the component, associated with the component's position in the tree, which is why the value survives re-renders even though the function body runs again from the top every time.

The reason you must never modify state directly is that React decides whether to re-render by comparing the new value to the previous one by reference. Mutating an object or array in place changes its contents but not its identity, so the comparison says nothing changed and the interface does not update. Pushing to a state array is the classic version of this bug: the data is correct, the screen is stale. The fix is to create a new value, using a spread for objects and arrays or a non-mutating method like map, filter, or concat.

Immutability also makes behaviour predictable. Because each render has its own snapshot of state, you can reason about what the component looked like at any point, which is what makes React DevTools time-travel and reliable memoisation possible.

Two details are worth knowing. First, updates are batched. Calling the setter several times in one event handler produces a single re-render, and each of those calls reads the same state value from that render, so calling setCount(count + 1) three times increments by one, not three. When the next value depends on the previous one, use the functional form, setCount(prev => prev + 1), which receives the latest value and composes correctly.

Second, the setter does not change the variable in the current render. After calling it, reading the state variable on the following line still gives the old value, because that variable belongs to the render that is already in progress. The new value appears on the next render.

A useful extra is lazy initialisation: passing a function to useState instead of a value means the expensive computation runs only on the first render rather than on every one.

Finally, keep state minimal. Anything derivable from existing state or props should be computed during render rather than stored, since duplicated state is the most common source of values drifting out of sync.