How to Use useState in React: A Complete Beginner Tutorial

How to Use useState in React: A Complete Beginner Tutorial

useState is the hook you will use most. It gives a component memory. Here is a complete beginner tutorial on using it correctly.

The Syntax

Call useState with an initial value. It returns an array with two items: the current state and a setter function. Destructure them, conventionally as value and setValue.

A Simple Counter

Start with a counter. Initialize count to zero, and on a button click call setCount with the next value. The UI updates automatically because React re-renders when state changes.

Updating Based on Previous State

When the new state depends on the old, pass a function to the setter: setCount(prev => prev + 1). This guarantees you get the correct previous value, especially when updates are batched.

State for Strings and Objects

State can be any type. For strings, call the setter with the new string. For objects, do not mutate; create a new object with the spread operator so React detects the change.

Multiple State Variables

Call useState multiple times for separate pieces of state, like a name and an age. Each is independent. If several values change together, you can group them in one object, but update immutably.

Where to Call useState

At the top level of the component, before any early returns. Never inside conditions or loops, because React tracks hooks by call order.

The Common Mistake

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

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, and only call setters in handlers and effects.