Reactの自動バッチ処理でstateの更新がまとまる条件

import { useEffect, useRef, useState } from 'react';
import { flushSync } from 'react-dom';
import { say } from './log';

function wait(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

// 2つの state を、いろいろな場所から更新して、描画の回数を数える
export function BatchProbe() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);
  const shownRef = useRef<HTMLParagraphElement>(null);
  const nativeRef = useRef<HTMLButtonElement>(null);

  say(`  描画: count=${count} flag=${flag}`);

  // set を呼び終えた時点で、画面に出ている内容を読む
  function readScreen() {
    say(`  set を呼び終えた時点の画面: ${shownRef.current!.textContent}`);
  }

  function updateBoth() {
    setCount((c) => c + 1);
    setFlag((f) => !f);
    readScreen();
  }

  // React を通さずに登録したイベントリスナー
  useEffect(() => {
    const button = nativeRef.current!;
    button.addEventListener('click', updateBoth);
    return () => button.removeEventListener('click', updateBoth);
  }, []);

  return (
    <>
      <p ref={shownRef}>count={count} flag={String(flag)}</p>
      <button id="event" onClick={updateBoth}>イベントハンドラ</button>
      <button id="timeout" onClick={() => setTimeout(updateBoth, 0)}>setTimeout</button>
      <button id="promise" onClick={() => Promise.resolve().then(updateBoth)}>Promise</button>
      <button id="native" ref={nativeRef}>addEventListener</button>
      <button
        id="await"
        onClick={async () => {
          setCount((c) => c + 1);
          await wait(10);
          setFlag((f) => !f);
        }}
      >
        途中で await
      </button>
      <button
        id="flush"
        onClick={() => {
          flushSync(() => {
            setCount((c) => c + 1);
          });
          setFlag((f) => !f);
        }}
      >
        flushSync
      </button>
    </>
  );
}

[イベントハンドラ]
  set を呼び終えた時点の画面: count=0 flag=false
  描画: count=1 flag=true
  → 描画 1回
[setTimeout]
  set を呼び終えた時点の画面: count=1 flag=true
  描画: count=2 flag=false
  → 描画 1回
[Promise]
  set を呼び終えた時点の画面: count=2 flag=false
  描画: count=3 flag=true
  → 描画 1回
[addEventListener]
  set を呼び終えた時点の画面: count=3 flag=true
  描画: count=4 flag=false
  → 描画 1回

[イベントハンドラ]
  set を呼び終えた時点の画面: count=0 flag=false
  描画: count=1 flag=true
  → 描画 1回
[setTimeout]
  描画: count=2 flag=true
  描画: count=2 flag=false
  set を呼び終えた時点の画面: count=2 flag=false
  → 描画 2回
[Promise]
  描画: count=3 flag=false
  描画: count=3 flag=true
  set を呼び終えた時点の画面: count=3 flag=true
  → 描画 2回
[addEventListener]
  描画: count=4 flag=true
  描画: count=4 flag=false
  set を呼び終えた時点の画面: count=4 flag=false
  → 描画 2回

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

[途中で await]
  描画: count=5 flag=false
  描画: count=5 flag=true
  → 描画 2回
[flushSync]
  描画: count=6 flag=true
  描画: count=6 flag=false
  → 描画 2回

[page.click で2回クリック]
  set を呼び終えた時点の画面: count=0 flag=false
  描画: count=1 flag=true
  set を呼び終えた時点の画面: count=1 flag=true
  描画: count=2 flag=false
  → 描画 2回
[page.dblclick（ダブルクリック）]
  set を呼び終えた時点の画面: count=2 flag=false
  描画: count=3 flag=true
  set を呼び終えた時点の画面: count=3 flag=true
  描画: count=4 flag=false
  → 描画 2回

import { useState } from 'react';
import { say } from './log';

// 同じ state を3回続けて更新する
export function PlusThree() {
  const [number, setNumber] = useState(0);
  say(`  描画: number=${number}`);
  return (
    <>
      <button
        id="value"
        onClick={() => {
          setNumber(number + 1);
          setNumber(number + 1);
          setNumber(number + 1);
        }}
      >
        値を渡す
      </button>
      <button
        id="updater"
        onClick={() => {
          setNumber((n) => n + 1);
          setNumber((n) => n + 1);
          setNumber((n) => n + 1);
        }}
      >
        関数を渡す
      </button>
    </>
  );
}

[値を渡して3回]
  描画: number=1
  → 描画 1回
[関数を渡して3回]
  描画: number=4
  → 描画 1回