■目次
Reactがパフォーマンスのために複数のステート更新をグループ化して、単一の再レンダーにまとめることを指します。 https://ja.reactjs.org/blog/2022/03/29/react-v18.html
例）3つの更新関数を用意し、それらを連続で呼び出して各stateを更新したとする。
以前まではstateが更新される度、再レンダリングが走っていたので、今回の例ならば3回再レンダリングが走ることになる。それだと表示速度等のパフォーマンスに影響を及ぼしてしまう。
そこでReact v18からは、複数の更新関数を一つのまとまりにし、その中で複数回再レンダリングが呼ばれても、1回の再レンダリングにまとめるようにした。このことをバッチングという。
React v18では自動でバッチ処理してくれる。
<aside> 🌿 特に設定等しなくても、React v18をインストールし、且つルート作成もv18のものにしていれば自動でバッチ処理されるよ！
<aside> 🌿 1つのイベントが1まとまり。1まとまりの中に記述した更新関数がまとめて1回の再レンダリングで更新される
</aside>
一通り処理を走らせてから、最後にまとめてstate更新・レンダリング
ちなみに、React v17までは、Reactのイベントハンドラ内でのみバッチ処理がおこなわれていた。
※イベントハンドラ：onClick, onChange など
<aside> ⚠️ イベントハンドラ内でaxiosやfetchメソッド等を使い、その中でstate更新した場合はバッチ処理はおこなわれないので注意！あくまでもイベントハンドラの直接配下でのみの話みたい。※React v17の話
</aside>
【確認テストの中身】