Reactには同一のReactイベントを扱うイベントハンドラー内に記述されたstateの更新は同じレンダーに反映されるという機能（batching）がある。React 18ではbatchingの適用範囲が拡大され再レンダリングの回数が削減されることにより、パフォーマンスの改善が期待できる。

以下は<a href="https://github.com/reactwg/react-18/discussions/21" target="_blank" rel="nofollow noopener noreferrer">&quot;Automatic batching for fewer renders in React 18 #21&quot;</a>
の一部を自分自身がその内容を理解するために翻訳したものです。
Automatic batchingに関する正確な情報に関しては元の投稿をご覧ください。
<h2>概要</h2>
React 18ではデフォルトによるbatchingの適用範囲を広げることによってそのままで適用したことになるパフォーマンス改善を追加し、アプリやライブラリにおける自分で書くbatch更新を取り除くことができる。この投稿はbatchingとは何なのかを、それが以前どのように動いていたか、そして何が変わったのかを説明する。
メモ：この投稿はほとんどのユーザーが考える必要がないような、機能の深い説明である。しかし教育する人やライブラリ開発者には関係があるかもしれません。
<h2>batchingとはなにか</h2>
Batchingはパフォーマンスをより良くする目的で複数のstate更新を一つの再レンダリングへとまとめることである。
例えば、同じクリックイベントの中に二つのstate更新があった場合、Reactは常にこれらを一つの再レンダーにまとめる。もし次のコードを実行すれば、stateを2回セットしているにも関わらずReactは毎回のクリックのたびに、単一のレンダリングを行う。
<pre><code class="language-jsx">function App() {
 const [count, setCount] = useState(0);
 const [flag, setFlag] = useState(false);

 function handleClick() {
 setCount(c =&gt; c + 1); // この段階ではまだ再レンダリングされない
 setFlag(f =&gt; !f); // この段階ではまだ再レンダリングされない 
 // Reactは最後に一回だけ再レンダリングを行う
 }

 return (
 &lt;div&gt;
 &lt;button onClick={handleClick}&gt;Next&lt;/button&gt;
 &lt;h1 style={{ color: flag ? &quot;blue&quot; : &quot;black&quot; }}&gt;{count}&lt;/h1&gt;
 &lt;/div&gt;
 );
}
</code></pre>
これは不必要な再レンダリングを避けるのでパフォーマンス的に良い。そしてコンポーネントのstate更新が「半分だけ終了」された状態のようなバグの元になるレンダリングを防ぐ。この挙動と似たものとして「レストランのウェイターが客の最初の注文だけを聞いてキッチンに伝えに行くのではなく、すべての注文を聞いてからキッチンまで伝えに行く挙動」が思い当たるだろう。
しかしReactは更新をbatchするタイミングに関して一貫性がない。例えば、データを取得する必要があり上記の<code>handleClick</code>の中でstateを更新すると、Reactはその更新をbatchせずに二つの独立した更新を実行する。
これはReactはbatch updateをクリックのようなブラウザーイベントの間にのみ使用するが、ここではイベントがすでに扱われた後にfetch callback内でstateを更新しているからである。
<pre><code class="language-jsx">function App() {
 const [count, setCount] = useState(0);
 const [flag, setFlag] = useState(false);

 function handleClick() {
 fetchSomething().then(() =&gt; {
 // React 17以前ではbatchされない。なぜならば以下のsetStateは
 //コールバックの中でイベントの間（during）ではなく後（after）に
 // 実行されるからであるに
 setCount(c =&gt; c + 1); // 再レンダリングを引き起こす
 setFlag(f =&gt; !f); // 再レンダリングを引き起こす
 });
 }

 return (
 &lt;div&gt;
 &lt;button onClick={handleClick}&gt;Next&lt;/button&gt;
 &lt;h1 style={{ color: flag ? &quot;blue&quot; : &quot;black&quot; }}&gt;{count}&lt;/h1&gt;
 &lt;/div&gt;
 );
}
</code></pre>
React 18まではReactのイベントハンドラーの中での更新のみbatchされていた。プロミス、setTimeout、ネイティブなイベントハンドラーやその他イベントはReactにおいてデフォルトで
batchされることはない。
<h2>automatic batchingとはなにか</h2>
<code>createRoot</code>を使ってReact 18を始めると、どこにstateの更新が存在していようが、全ての更新は自動的にbatchされる。
これはtimeout、プロミス、ネイティブなイベントハンドラーやその他イベントの中での更新が
Reactイベントの中での更新と同じ方法でbatchされるということを意味している。我々はこれにレンダリングの処理を削減し、アプリケーションのより良いパフォーマンスにつながることを期待している。
<pre><code class="language-jsx">function App() {
 const [count, setCount] = useState(0);
 const [flag, setFlag] = useState(false);

 function handleClick() {
 fetchSomething().then(() =&gt; {
 // React 18以降ではこれらはbatchされる
 setCount(c =&gt; c + 1);
 setFlag(f =&gt; !f);
 // Reactは最後に一度だけ再レンダリングを行う
 });
 }

 return (
 &lt;div&gt;
 &lt;button onClick={handleClick}&gt;Next&lt;/button&gt;
 &lt;h1 style={{ color: flag ? &quot;blue&quot; : &quot;black&quot; }}&gt;{count}&lt;/h1&gt;
 &lt;/div&gt;
 );
}
</code></pre>
メモ:React 18を部分的に適用するために<code>createRoot</code>へとアップグレードすることを求められている。<code>render</code>を使った古い挙動は二つのバージョンでの実験をやりやすくするためだけに存在する。
Reactは更新がどこに起きようとも更新を自動的にbatchする。
<pre><code class="language-jsx">function handleClick() {
 setCount(c =&gt; c + 1);
 setFlag(f =&gt; !f);
 // React will only re-render once at the end (that&#x27;s batching!)
}
</code></pre>
これも同じように振る舞う
<pre><code class="language-jsx">setTimeout(() =&gt; {
 setCount(c =&gt; c + 1);
 setFlag(f =&gt; !f);
 // React will only re-render once at the end (that&#x27;s batching!)
}, 1000);
</code></pre>
これも同じように振る舞う
<pre><code class="language-jsx">elm.addEventListener(&#x27;click&#x27;, () =&gt; {
 setCount(c =&gt; c + 1);
 setFlag(f =&gt; !f);
 // React will only re-render once at the end (that&#x27;s batching!)
});
</code></pre>
メモ：Reactは一般的に安全なときにのみ更新をbatchする。例えばReactはクリックやキーの押下などユーザー主導の全てのイベントについて、それに関連するDOMが次のイベントまでに完全に更新されることを保証している。これは例えばsubmitを不可能にするフォームが2回提出されないことを保証する。
<h2>batchしたくないときはどうするのか</h2>
大抵batchは安全であるが、stateが変化した直後にDOMから何かを読み取ることに依存するコードがあるかもしれない。それらのケースでは、<code>ReactDOM.flushSync()</code>を使ってオプトアウトでbatchをやめることができる。
<pre><code class="language-jsx">import { flushSync } from &#x27;react-dom&#x27;; // メモ：react-domでありreactではない

function handleClick() {
 flushSync(() =&gt; {
 setCounter(c =&gt; c + 1);
 });
 // React has updated the DOM by now
 // ReactはここでDOMを更新する
 flushSync(() =&gt; {
 setFlag(f =&gt; !f);
 });
 // ReactはここでDOMを更新する
}
</code></pre>
我々は通常これを使うことを想定していない。
<h2>automatic batchingによってHooksで書いたコードが壊れることはあるか？</h2>
under construction
もしHooksを使っているなら、我々はautomatic batchingはほとんどの場合「単にそう機能する」だけであると期待している。
<h2>automatic batchingによってClassで書いたコードが壊れることはあるか？</h2>
under construction
<h2><code>unstable_batchedUpdates</code>とはなにか</h2>
under construction

React18におけるautomatic batchingを理解する