ReactのflushSyncで、stateの更新をすぐ画面に反映する方法

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

// setCount の直後に、画面（DOM）に出ている数を読む
export function CountReader({ useFlush }: { useFlush: boolean }) {
  const [count, setCount] = useState(0);
  const ref = useRef<HTMLSpanElement>(null);
  function handleClick() {
    if (useFlush) {
      flushSync(() => {
        setCount(count + 1);
      });
    } else {
      setCount(count + 1);
    }
    say(`  setCount の直後: state の変数 count=${count} 画面=${ref.current!.textContent}`);
  }
  return (
    <button onClick={handleClick}>
      <span ref={ref}>{count}</span>
    </button>
  );
}

--- CountReader（flushSync なし） ---
クリック 1回目
  setCount の直後: state の変数 count=0 画面=0
  少し待った後: 画面=1
クリック 2回目
  setCount の直後: state の変数 count=1 画面=1
  少し待った後: 画面=2
--- CountReader（flushSync あり） ---
クリック 1回目
  setCount の直後: state の変数 count=0 画面=1
  少し待った後: 画面=1
クリック 2回目
  setCount の直後: state の変数 count=1 画面=2
  少し待った後: 画面=2

import { useRef, useState } from 'react';
import { flushSync } from 'react-dom';

type Todo = { id: number; text: string };

const initialTodos: Todo[] = [];
for (let i = 0; i < 20; i++) {
  initialTodos.push({ id: i, text: `やること ${i + 1}` });
}

// 項目を足して、リストの最後の項目までスクロールする
export function TodoList({ useFlush }: { useFlush: boolean }) {
  const listRef = useRef<HTMLUListElement>(null);
  const [todos, setTodos] = useState(initialTodos);

  function handleAdd() {
    const newTodo = { id: todos.length, text: `やること ${todos.length + 1}` };
    if (useFlush) {
      flushSync(() => {
        setTodos([...todos, newTodo]);
      });
    } else {
      setTodos([...todos, newTodo]);
    }
    listRef.current!.lastElementChild!.scrollIntoView({ block: 'nearest' });
  }

  return (
    <>
      <button onClick={handleAdd}>追加</button>
      <ul ref={listRef} className="list">
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}

.list { height: 160px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.list li { height: 32px; line-height: 32px; }

--- TodoList（flushSync なし） ---
クリック 1回目: 項目数=21 最後の項目=「やること 21」 見えている一番下の項目=「やること 20」
クリック 2回目: 項目数=22 最後の項目=「やること 22」 見えている一番下の項目=「やること 21」
クリック 3回目: 項目数=23 最後の項目=「やること 23」 見えている一番下の項目=「やること 22」
--- TodoList（flushSync あり） ---
クリック 1回目: 項目数=21 最後の項目=「やること 21」 見えている一番下の項目=「やること 21」
クリック 2回目: 項目数=22 最後の項目=「やること 22」 見えている一番下の項目=「やること 22」
クリック 3回目: 項目数=23 最後の項目=「やること 23」 見えている一番下の項目=「やること 23」

import { useEffect, useState } from 'react';
import { flushSync } from 'react-dom';

// 印刷の直前（beforeprint）に state を変え、印刷される画面に出す
export function PrintApp({ useFlush }: { useFlush: boolean }) {
  const [isPrinting, setIsPrinting] = useState(false);
  useEffect(() => {
    function handleBeforePrint() {
      if (useFlush) {
        flushSync(() => {
          setIsPrinting(true);
        });
      } else {
        setIsPrinting(true);
      }
    }
    function handleAfterPrint() {
      setIsPrinting(false);
    }
    window.addEventListener('beforeprint', handleBeforePrint);
    window.addEventListener('afterprint', handleAfterPrint);
    return () => {
      window.removeEventListener('beforeprint', handleBeforePrint);
      window.removeEventListener('afterprint', handleAfterPrint);
    };
  }, [useFlush]);
  return <h1>印刷中: {isPrinting ? 'はい' : 'いいえ'}</h1>;
}

--- PrintApp（flushSync なし） --- 印刷前の画面=「印刷中: いいえ」 印刷された内容=「印刷中: いいえ」 印刷後の画面=「印刷中: いいえ」
--- PrintApp（flushSync あり） --- 印刷前の画面=「印刷中: いいえ」 印刷された内容=「印刷中: はい」 印刷後の画面=「印刷中: いいえ」

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

// エフェクトの中で flushSync を呼ぶ（公式が「してはいけない」としている書き方）
export function FlushInEffect() {
  const [ready, setReady] = useState(false);
  const ref = useRef<HTMLParagraphElement>(null);
  useEffect(() => {
    flushSync(() => {
      setReady(true);
    });
    say(`  エフェクトで flushSync した直後: 画面=${ref.current!.textContent}`);
  }, []);
  return <p ref={ref}>{ready ? '準備できた' : '準備中'}</p>;
}

// queueMicrotask で、今の描画が終わってから flushSync を呼ぶ
export function FlushInMicrotask() {
  const [ready, setReady] = useState(false);
  const ref = useRef<HTMLParagraphElement>(null);
  useEffect(() => {
    queueMicrotask(() => {
      flushSync(() => {
        setReady(true);
      });
      say(`  マイクロタスクで flushSync した直後: 画面=${ref.current!.textContent}`);
    });
  }, []);
  return <p ref={ref}>{ready ? '準備できた' : '準備中'}</p>;
}

--- FlushInEffect ---
  エフェクトで flushSync した直後: 画面=準備中
  少し待った後: 画面=準備できた
  console.error: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
--- FlushInMicrotask ---
  マイクロタスクで flushSync した直後: 画面=準備できた
  少し待った後: 画面=準備できた
  console.error: なし

import { useState } from 'react';
import { flushSync } from 'react-dom';

export const renders = { count: 0 };

type Mode = 'plain' | 'oneFlush' | 'eachFlush';

// 1回のクリックで3つの state を更新し、描画の回数を数える
export function ThreeUpdates({ mode }: { mode: Mode }) {
  renders.count++;
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  const [c, setC] = useState(0);
  function handleClick() {
    if (mode === 'plain') {
      setA(a + 1);
      setB(b + 1);
      setC(c + 1);
    } else if (mode === 'oneFlush') {
      flushSync(() => {
        setA(a + 1);
        setB(b + 1);
        setC(c + 1);
      });
    } else {
      flushSync(() => setA(a + 1));
      flushSync(() => setB(b + 1));
      flushSync(() => setC(c + 1));
    }
  }
  return <button onClick={handleClick}>{a}-{b}-{c}</button>;
}

--- ThreeUpdates mode=plain --- 1回のクリックで描画: 1回 画面=1-1-1
--- ThreeUpdates mode=oneFlush --- 1回のクリックで描画: 1回 画面=1-1-1
--- ThreeUpdates mode=eachFlush --- 1回のクリックで描画: 3回 画面=1-1-1

--- Outside ---
  flushSync の直後: 画面=a=1 b=1