React の useState で、1回のクリックの中で setCount(count + 1) を2回続けて呼ぶと count はどうなりますか?
1〜4キーで選択、Enterで回答できます
解説
正解は「1 しか増えず 1 になる」です。count はそのレンダー時点で固定された値であり、2回の setCount がどちらも同じ 0 + 1 を計算しているためです。なぜ正解かuseState が返す count は、そのレンダーの間ずっと変わらない定数のような値です。クリック時点の count は 0 なので、次のようになります。const onClick = () => { setCount(count + 1); // count は 0 なので「1 にして」と依頼 setCount(count + 1); // count はまだ 0 のまま。やはり「1 にして」と依頼 };React は同じイベント内の更新をまとめて処理(バッチ処理)し、最後の依頼どおり 1 にして1回だけ再レンダーします。2 増やしたい場合は、直前の値を受け取る更新関数を使います。setCount(c => c + 1); // 0 → 1 setCount(c => c + 1); // 1 → 2 (直前の結果を受け取れる)他の選択肢が誤りの理由2 増えて 2 になる: 上記の更新関数を使った場合の挙動で、値を直接渡す書き方では起きません。次のクリック時に 2 と表示される: バッチ処理は同じイベント内の更新をまとめるだけで、更新が次のクリックへ持ち越されることはありません。Strict Mode では 2 になる: Strict Mode は開発時にレンダーや一部の関数を2回実行しますが、最終的な state の値は変わりません。よくある誤解「setState は非同期だから2回目が間に合わない」と説明されがちですが、本質はそのレンダー内の count が古い値のまま固定されている点にあります。実務でも、直前の state に依存する更新(カウンタ、配列への追加、トグルの連続実行など)では、値渡しではなく更新関数を使うのが安全です。参考: state 更新のキューイング – React参考: useState – React