React入門 練習問題 50：React状態更新のバッチ処理
次のコードを実行した場合、画面に表示される内容として正しいものはどれですか？
```jsx
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
}
```
- ボタンをクリックすると、Countの値が2ずつ増加する
- ボタンをクリックすると、Countの値が1ずつ増加する
- コンパイルエラーが発生する
- 画面には何も表示されない
- ボタンを2回クリックしてはじめてCountの値が1増加する
Qraftユーザーの成績：正答率 69%（9/13回正解）
正解と解説を見る
Reactの状態更新は同期的に即時反映されるのではなく、バッチ処理（＝複数の更新をまとめて1回だけ再レンダリングする仕組み）によって行われます。この設問ではボタンクリックのたびにCountの値が1ずつ増加するのが正しい動作です。
【正解の理由】
handleClick内でsetCount(count + 1)を2回呼び出していますが、どちらの呼び出しも同じレンダリング内でのcountの値（更新前の値）を参照するため、実質的に「同じ値+1」を2回実行しているだけになります。そのため1回のクリックでCountは1しか増加しません。
【不正解の理由】
• 「Countの値が2ずつ増加する」：2回のsetCountはどちらも更新前の同じcount値を参照するため、2ずつ増加することはありません。
• 「コンパイルエラーが発生する」：useStateやイベントハンドラの記述に誤りはなく、正常にコンパイルされます。
• 「画面には何も表示されない」：Count: 0から始まり、クリックのたびに正しく数値が表示されます。
• 「ボタンを2回クリックしてはじめて1増加する」：クリック1回ごとに正しく1回分の更新が反映されるため、2回クリックしないと増えないということはありません。