How does the useState hook work?

Question

Accepted Answer

`useState` gives a function component a piece of **local, reactive state**. It returns a pair: the **current value** and a **setter** function. Calling the setter schedules a re-render with the new value.

```jsx
const [count, setCount] = useState(0); // 0 is the initial value
setCount(count + 1);   // value form
setCount(c => c + 1);  // functional form (preferred when based on previous)
```

## Two things that surprise beginners

**1. Updates are asynchronous / batched.** `count` does not change on the line after `setCount`; it has the new value on the *next* render. So this only increments once:

```jsx
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
```

Use the **functional updater** when the next value depends on the previous one, because React passes the latest value in:

```jsx
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
```

**2. The initial value is used only on the first render.** For an expensive default, pass a function so it runs once (lazy init):

```jsx
const [data] = useState(() => expensiveInit()); // runs once, not every render
```

## Why it matters

State is what makes a component interactive — React re-runs the function and re-renders the UI whenever state changes.

Treat state as **immutable**: create a new array/object instead of mutating, e.g. `setItems([...items, x])`, otherwise React may not detect the change.