useState: Giving Components Memory

Why it exists

Function components are stateless by nature; they execute and their variables disappear. To build interactive UIs, components need a way to remember information between renders, like what a user has typed into an input field. The useState Hook is React's fundamental solution for adding this memory, or "state," to components.

The mental model

Think of useState as asking React to remember a value for you. You give it an initial value, and it gives you back a pair: the current value and a special function to update that value. Calling this "setter" function doesn't just change a variable; it tells React, "this important value has changed, so please re-render this component and any children with the new information."

How it works

You call useState at the top level of your component, passing an initial value. It returns an array with exactly two items: const [age, setAge] = useState(28);. The first item is the current state value, and the second is the setter function. When you call setAge(29), React schedules a re-render. On the next render, the useState call will return 29 as the current value for age. If calculating the initial state is expensive, you can pass a function, useState(() => createTodos()), which React will only run on the very first render.

When to use it

Use useState for any data that changes over time and should cause a UI update. This is your primary tool for handling user interaction. Examples include managing form inputs, tracking the open/closed state of a modal, storing data fetched from an API, or keeping score in a game. If a value changes and the user should see that change, it probably belongs in state.

When not to use it

Avoid state for values that can be calculated from existing props or other state variables during render. Also, don't call Hooks like useState inside loops, conditions, or nested functions. If you need conditional state, extract the logic into a new component. For values that need to persist across renders but don't trigger UI updates (like a timer ID), use the useRef Hook instead.

One canonical example

A simple counter shows the key footgun. You might initialize state with const [count, setCount] = useState(0);. To increment, you call setCount(count + 1). The mistake is assuming count will be 1 on the very next line of code. It won't. State updates are queued. The count variable in the current render's scope is still 0. The new value is only available when the component re-renders.