📢 このシリーズについて
このシリーズは、React公式ドキュメント（ https://ja.react.dev/ ）を(できるだけ)全て読み、学んだことやコード例、自分なりの補足をまとめていくチャレンジの記録です。
目的
- Reactの基礎〜応用を公式の正しい情報で体系的に理解する
- 自分の言葉でアウトプットして知識を定着させる
このシリーズでは、ただ内容をなぞるのではなく、「自分がReactを使っていても気づかなかった事実や落とし穴」 を重点的にまとめます。
読んだときに「へぇ、そうなんだ！」となったポイントは必ず記録します！
目次 - 本記事で取り扱う内容
- “ 待て “ができるReact
- 姿が見えてきた「関数型アップデート」
- stateの置き換えと更新
🗂 基本情報
- タイトル:一連の state の更新をキューに入れる
- URL: https://ja.react.dev/learn/queueing-a-series-of-state-updates
- カテゴリ: Learn
- 難易度: ★★
- 読了日: 2025-08-22
📌 内容
stateを更新する時に再レンダリングが予約される。じゃ一つのイベントや処理でstateにいろんな処理を加えたいとき、操作の回数分レンダリングが予約されるってこと？って疑問に答えが得られました。
stateの更新をバッチ処理することでうまいことやっているみたい。
“ 待て “ができるReact
イベントハンドラでstateを更新し再レンダリングをするという処理は非常によく行われる。Reactは、そのイベントハンドラ内のすべてのコード・処理が実行されるまでstateの更新処理を待機する。
つまり、イベントにより発火した関数のコードが全て実行されるまでUIの更新が行われないということだ。
ただし、クリックのようなイベントが複数回発火してもそれぞれは別のバッチとして処理される。3回クリックしたなら、3バッチ処理が走る。
姿が見えてきた「関数型アップデート」
私の過去記事 “ **stateを腹落ちするためには”レンダリング”を理解らなきゃダメらしい #2 “** でも取り扱った、
setSomething( x ⇒ x + 1 )
の記述。
これは「関数型アップデート」という仕組みで、この中の
x => x + 1
の記述を “ 更新用関数 (updater function) “ という。
更新用関数は以下のように記述する。
setSometing( 実行前の更新用変数 => 実行後の更新用変数 )
Reactがこの関数をキューに入れていく。イベントハンドラ内の全コードが実行されるまで他のことはしない。
そして、レンダーを行う前に内部でキューを消化し更新されたstateを返す。その後再レンダリングを行うという流れだ。
stateの置き換えと更新
これまで学んできた “ 置き換え “ と、 “ 更新 “ が同一イベントハンドラ内で共存した場合どのような挙動をするのだろうか。
以下のイベントハンドラの挙動について考える。
const [number, setNumber] = useState(0);
/// 中略
<h1>{number}</h1>
<button onClick={() => {
setNumber(number + 5);
setNumber(number + 5);
setNumber(n => n + 1);
console.log(number);
setNumber(n => n + 1);
}}>
このイベントが発火した時consoleと { number }に表示されるものはなにか。
実行すると consoleには “ 0 “ 、{ number }には “ 7 “ が表示される。
なぜconcoleは0になるのか。6や1ではないのはなぜか。
答えは単純で、「この関数の実行が終了する」まで、変数numberの値は一定（この場合は初期値の0）であるため。
では、numberが7になるのはなぜか。2つ目のsetNumberでstateが5に “ 置き換え “ した後に、2つの更新用関数によるstateの “ 更新 “ が行われたからだ。
いろいろ組み合わせ実行してみることで比較ができ、理解が深まった実感がある。うれしい。
🚀 宣伝コーナー
個人開発もやっています🍃
ぜひ一度触ってみてください！
1. CAN I DO THIS
📜概要
🌟 「この問題、私に解ける？」がすぐ分かる！ 🌟
CAN I DO THIS は、問題（文章／画像）をポンっと入れるだけで、「解くのに必要な前提知識」を瞬時に可視化するツールです💡
🛡 前提知識がないまま無理に挑んで、時間と体力をムダに消耗…
そんな経験、もうしなくてOK。
必要な知識が足りているか、すぐ判断できます！
✨ 主な機能
- 問題を貼るだけ → 必要知識リスト＋学習ルート自動生成
- 前提 → 派生が一目で分かる依存関係グラフ
- 登録不要＆無料（広告視聴で利用可能）