useTransition

公式ドキュメント ↗

const [isPending, startTransition] = useTransition();

function handleChange(value) {
  setInputValue(value); // 即座に更新(常に軽い)
  startTransition(() => {
    setQuery(value); // 重いフィルタ処理を伴う更新。急がなくていいとマークする
  });
}

「裏側で処理中」であることを伝える

<p>useTransitionあり {isPending && <span>(更新中…)</span>}</p>
<div className={isPending ? "opacity-50" : ""}>
  <HeavyList query={query} />
</div>

上のデモの右側パネルを見ると、入力中はリストが少し薄くなり「(更新中…)」の表示が出る。isPendingは「今まさに後回しの更新が進行中かどうか」を教えてくれる値。真っ白なローディング画面にせず、古い結果を見せたまま裏で追いついていることを伝えられる。

実際の使いどころ

function handleTabClick(nextTab) {
  setActiveTabLabel(nextTab); // タブのハイライトは即座に切り替わってほしい
  startTransition(() => {
    setActiveTabContent(nextTab); // 重いコンテンツの描画は後回しでもよい
  });
}

典型的なのはタブ切り替えUI。タブの選択状態は即座に切り替わってほしいが、中身の描画が重いことがある。「選んだ」という反応は即座に、コンテンツの描画のような重い処理はstartTransitionで包んで後回しにする。検索・フィルタ・ページ送りなど、入力とセットになった重い更新全般に応用できる。