Transition

「レンダリングを遅延させる」そして「世界を分岐させる」

Reactのトランジションで世界を分岐させるハンズオン：

https://zenn.dev/uhyo/books/react-concurrent-handson-2/viewer

緊急性の考慮

• Urgent Update …… キー入力やクリック、要素の選択といった操作を即座に反映させる
• Transition Update …… UI がある状態から別の状態に遷移する際に意図的に遅らせる

UI コンテンツの遅延ローディングの2 つのユースケース

• 新しい画面を即座にロード …… できるだけ早く次の画面を表示する。データのロードが間に合わない場合は進行状態であることを表現するプレースホルダーの UI を代わりに出す
• 既存の画面を継続表示 …… 今の時点のデータが古くなっていても、新しいデータのロードが完了するまでは現在の画面をずっと表示し続ける。ただし進行中であることがわかるよう、ペンディング状態を何らかの形で表現する”

startTransition

• import

import { startTransition } from "react";

• 基本の使い方

  • コールバック関数を受け取り、その関数をすぐに呼び出す

  • コールバック関数内ではステート更新を行う

  • startTransitionの中で行われたステート更新はトランジションであると見なされる

    トランジション　 ... 優先度の低いステート更新

startTransition(() => {  
  setSomeState(/* ... */);
});