React useState Hook: A Complete Guide for Beginners

What is useState?

useState is a React Hook that lets you add state to functional components. Before Hooks, only class components could hold state. Today, useState is the standard way to manage simple local state in any React component.

Basic Syntax

You call useState with an initial value and it returns an array with two items: the current state value and a setter function. For example: const [count, setCount] = useState(0). Every time you call the setter, React re-renders the component with the new value.

Common Mistakes to Avoid

One frequent mistake is mutating state directly instead of using the setter. Another is forgetting that state updates are asynchronous — you should never read the updated state immediately after calling the setter in the same render cycle. Use the functional update form (prev => prev + 1) when the new state depends on the old one.

When to Use useState vs useReducer

useState is perfect for simple, independent pieces of state like toggles, form inputs, or counters. When state logic grows complex or multiple sub-values are related, consider switching to useReducer for clearer, more predictable updates.