useState hook はどのように動作しますか？

Question

Accepted Answer

`useState` は function component に **local で reactive な state** を持たせます。戻り値は pair で、**現在の値**と **setter** 関数です。setter を呼ぶと、新しい値で re-render が予約されます。

```jsx
const [count, setCount] = useState(0); // 0 は initial value
setCount(count + 1);   // value form
setCount(c => c + 1);  // functional form（previous に基づく場合に推奨）
```

## 初学者が驚きやすい 2 つの点

**1. update は asynchronous / batched です。** `setCount` の次の行で `count` が変わるわけではありません。新しい値になるのは*次の* render です。そのため、これは 1 回しか増えません。

```jsx
setCount(count + 1);
setCount(count + 1); // どちらも同じ stale な `count` を読む → 合計 +1
```

次の値が previous value に依存する場合は、**functional updater** を使います。React が最新の値を渡してくれるからです。

```jsx
setCount(c => c + 1);
setCount(c => c + 1); // 合計 +2 — それぞれ最新値を受け取る
```

**2. initial value は初回 render でだけ使われます。** 高コストな default の場合は、関数を渡すと一度だけ実行されます（lazy init）。

```jsx
const [data] = useState(() => expensiveInit()); // 毎 render ではなく一度だけ実行
```

## なぜ重要なのか

State は component を interactive にするものです。state が変わるたびに、React は関数を再実行し UI を re-render します。

state は **immutable** として扱います。mutate するのではなく、新しい array/object を作ります。例: `setItems([...items, x])`。そうしないと React が変更を検出できない場合があります。