Common useState Mistakes That Break Your React App

Common useState Mistakes That Break Your React App

useState looks simple, which is why beginners make the same mistakes repeatedly. Here are the most common ones and how to avoid them.

Mutating State Directly

Changing a state variable directly instead of using the setter means React does not detect the change and the UI does not update. Always use the setter function.

Mutating Objects and Arrays

Even with the setter, mutating the same object in place can fail to trigger a re-render because React compares references. Replace objects and arrays with new copies.

Calling the Setter During Render

Calling a setter in the render body causes an infinite loop. Only call setters in event handlers, effects, or callbacks.

Using the Previous Value Incorrectly

Calling setCount(count + 1) twice in a row uses the same stale count for both, because updates are batched. Use setCount(prev => prev + 1) to get the correct previous value.

Calling Hooks Conditionally

Calling useState inside a condition breaks the order in which React tracks hooks, causing bugs. Always call hooks at the top level of the component.

Forgetting to Initialize Properly

Passing a function that returns the initial value is different from passing the value directly. For expensive initial computations, pass a function so it only runs once.

Storing Derived Values

If a value can be computed from props or other state, do not store it in useState. Compute it during render to avoid sync bugs.

The Takeaway

Most useState bugs come from mutating state, calling setters during render, using stale previous values, or calling hooks conditionally. Avoid these and useState becomes reliable.