How to Use useState to Update Your React UI

How to Use useState to Update Your React UI

useState is the hook that makes React interactive. It lets a component remember data and update the UI when that data changes. Here is how to use it correctly.

The Basics

Call useState with an initial value. It returns a pair: the current state value and a function to update it. By convention, name them like count and setCount.

Updating State

Call the setter with the new value to update state and trigger a re-render. For state based on the previous value, pass a function to the setter so you get the correct previous state.

State Updates Are Asynchronous

The setter does not update the variable immediately. If you read it right after calling the setter, you get the old value. React batches updates and re-renders later.

Updating Objects and Arrays

Never mutate state objects directly. Instead, create a new object or array with the changes using the spread operator, so React detects the change and re-renders.

Where to Call useState

Call hooks at the top level of the component, not inside loops, conditions, or nested functions. This preserves the order in which hooks run, which React relies on.

Multiple State Variables

You can call useState multiple times for separate pieces of state. If state values are tightly related, consider grouping them into one object, but be careful to update immutably.

The Common Mistake

Beginners call the setter in the render body, causing an infinite loop. Only update state inside event handlers, effects, or callbacks, never directly during render.

The Takeaway

useState gives a component memory. Use the setter to update, pass a function when the new value depends on the old, never mutate objects directly, and only update state in handlers and effects.