Automatic Batching

useStateを使った下記のようなコードがあるとします。

function Sample1() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  const increment = () => {
    setCount(count + 1);
    setFlag(!flag);
  };

  console.log("rendering");

  return (
    <div className="App">
      <button onClick={increment}>increment</button>
      {`count: ${count}, flag: ${flag}`}
    </div>
  );
}

increment関数を呼び出すとsetCount,setFlagでそれぞれcount,flagの状態を更新します。
2つのstateが更新されますが、再レンダリングは1回のみとなります。

React18以前でもReactのイベントハンドラ内の複数の状態の更新は、バッチ処理として一回の再レンダリングにまとめてくれています。
ただし、下記のようなsetTimeoutやPromiseのようなイベント内での更新はバッチ処理に対応していませんでした。

function Sample2() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  const incrementTimeout = () => {
    setTimeout(() => {
      setCount(count + 1);
      setFlag(!flag);
    }, 100);
  };

  console.log("rendering");

  return (
    <div className="App">
      <button onClick={incrementTimeout}>increment</button>
      {`count: ${count}, flag: ${flag}`}
    </div>
  );
}

試しにReact17の環境でincremant関数を呼び出すと2回レンダリングされていることがわかります。
React18ではこのような場合でもバッチ処理を行ってくれるようになりました。

React17	React18