あなたは、反応でUnstableThank Batchedupdatesを知っていますか?(強制的なバッチ更新)

それが反応における文書化されていないAPIのうちの1つであるので、これがそれについて読むのが初めてであるならば、それはOKです.
最初に我々は何がバッチ状態更新を知っている必要がありますか?
によると、作成された

Batching is when React groups multiple state updates into a single re-render for better performance.

function App() {
  const [count, setCount] = useState(0);
  const [isEven, setIsEven] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // Does not re-render yet
    setIsEven(f => !f); // Does not re-render yet
    // React will only re-render once at the end (that's batching!)
  }

  return (
    <div>
      <button onClick={handleClick}>counter{count}</button>
    </div>
  );
}

以前の反応版(17とそれ以前)では、ブラウザーイベント(クリックのような)だけで、バッチがありました、そして

ネイティブDOMイベントリスナー(例えば、EL . addeventListener () )

asyncコールバック(例えば、約束、タイムアウト、間隔)

そして、それを利用できるようにするために、あなたは
ハウツーとスタイル.

import {unstable_batchedUpdates} from 'react-dom';

const batchUpdate = unstable_batchedUpdates(() => {
  setName('Moustafa');
  setAge(25);
});


batchUpdate() //this will group all state changes inside and apply it in one re-render 

グッドニュース
あなたが反応18を使用している場合、上記の場合は、反応18は現在自動バッチをサポートしているため、もうそれを必要としない.
これは、タイムアウト、約束、ネイティブイベントハンドラまたは他のイベントの内部の更新は、反応イベント内の更新と同じ方法でバッチされることを意味します
あなたはそれについてもっと読むことができます

警告⚠️

以来、反応18自動バッティングをサポートし、それは
未ドキュメント化されたAPIではなく、人気のライブラリがもはやその存在に依存しない後に、将来の主要なバージョンの反応で取り除かれるかもしれません.