React入門 練習問題 7：useStateの使い方
次のuseStateを使ったコンポーネントで、ボタンを3回クリックした後の表示はどうなりますか？
```jsx
function Counter() {
const [count, setCount] = useState(1);
const handleClick = () => {
setCount(count + 1);
setCount(count + 1);
};
return (
<div>
<p>カウント: {count}</p>
<button onClick={handleClick}>増加</button>
</div>
);
}
```
- カウント: 7（1 + 2×3回 = 7）
- カウント: 4（1 + 1×3回 = 4）
- カウント: 6（1 + 2 + 2 + 1 = 6）
- カウント: 3（1 + 1 + 1 = 3）
- カウント: 2（バッチ処理でほとんど更新されないと誤解した場合）
Qraftユーザーの成績：正答率 53%（10/19回正解）
正解と解説を見る
3回クリック後の表示は「カウント: 4」です。
【正解の理由】
`setCount(count+1)`を2回書いても、Reactの状態更新はその時点の`count`の値を基準にバッチ処理（＝複数の更新をまとめて1回の再レンダリングとして扱うこと）されるため、1回のクリックにつき実質的に`count`は1しか増えません。初期値1から3回クリックすると 1+1+1+1 = 4 になります。
【不正解の理由】
• カウント: 7：`setCount`を2回呼ぶたびに本当に2ずつ増える（1+2×3=7）と誤解した場合の計算。
• カウント: 6：加算のルールを誤解し、途中の回だけ2ずつ増えると考えた場合の計算。
• カウント: 3：初期値を1ではなく0と誤解した場合の計算（0+1×3=3）。
• カウント: 2（バッチ処理でほとんど更新されないと誤解した場合）：バッチ処理は「更新をまとめる」だけで「更新を無視する」わけではなく、クリックごとに1ずつは確実に増える。