useTransitionを調べる
上のドキュメントにあるように用途としては以下が挙げられる
- state 更新をノンブロッキングのトランジションとしてマークする
トランジションなしの場合、ボタンを押したときそれが遅い処理だとUI が反応しなくなるが、トランジションありの場合だとフリーズしない - トランジション中に保留中状態を視覚的に表示する
トランジション中はisPendingで判別が可能なので、それで視覚的な何かを表示させることができる - 望ましくないローディングインジケータの防止
すぐに画面が切り変わるときにローディングインジケータが一瞬表示されるとユーザーの気が散ってしまうので、トランジションを使って防止する - サスペンス対応ルータの構築
ページのナビゲーションをトランジションとしてマークすると、上記の更新ノンブロッキングやローディングインジケータの防止により、ユーザーに快適にページ遷移をさせることができる
仕組みはuhyoさんの記事がわかりやすかった
startTransitionに渡すcallbackの中でsetStateを行うと、そのsetStateによって始まったレンダリングが完全に完了するまで表側のレンダリングを待ってくれるものと理解した
また、裏の世界と表の世界とあったが、確かにGitブランチのように例えても良さそう（そういう例え話をお聞きした）
表の世界がメインブランチ、裏の世界がフィーチャーブランチだとして、フィーチャーブランチで作業が完了したらメインブランチにマージされるイメージ
応用例としては以下の記事でプロレスバーが紹介されていて、トランジション開始時に100%のうちの数%ずつ等間隔で進行させて、100%になり切る前にトランジションが完了したらcallback関数の中で残りの%分を一気に終わらせるようなアニメーションを作成している
