React useTransition — 重い更新中もUIをレスポンシブに保つ

useTransitionによるレスポンシブUI

useTransitionは状態更新を非緊急のトランジションとしてマークし、Reactがタイピングなどの優先度の高い更新のためにそれらを中断できるようにします。

問題

タブの切り替えや大きなリストのフィルタリング時に、重いレンダリングがUI全体をフリーズさせる可能性があります。

解決策

const [isPending, startTransition] = useTransition();

function handleTabChange(tab: string) {
  startTransition(() => {
    setTab(tab); // 非緊急 -- Reactがこれを中断できる
  });
}

return (
  <>
    {isPending && <Spinner />}
    <TabContent tab={tab} />
  </>
);

動作の仕組み

1. Reactがトランジション更新のレンダリングを開始
2. より高い優先度の更新が到着した場合、Reactはトランジションを一時停止
3. Reactは緊急の更新をすぐにレンダリング
4. メインスレッドが空いたらトランジションを再開
5. isPendingはトランジションレンダリング中にtrue

重要な制約

• startTransitionに渡すコールバックは同期的でなければならない
• 状態更新のみをラップ -- 非同期操作を直接ラップしない
• タイピングを制御する入力状態はトランジションの外側に保つ