■目次

Transition（startTransition）とは

トランジション（transition; 段階的推移）とは React における新たな概念であり、緊急性の高い更新 (urgent update) と高くない更新 (non-urgent update) を区別するためのものです。

• 緊急性の高い更新：タイプ、クリック、プレスなど、ユーザー操作を直接反映するもの

  例）ボタンをクリックしたら背景色を変更し、押されたことを分かるようにする

• 緊急性の低い更新：UIをある画面から別の画面に段階的に遷移させるもの

  例）絞り込み検索の結果表示

useTransitionとは

• トランジション中にユーザーにインタラクションを返すことができるフック
  • 段階的に遷移している要素について、「ローディング中」や「検索中…」などユーザーに伝えることができる
• useTransitionが使えない場合にstartTransitionを使う
  • startTransition ：フックが使えない場合にトランジションを開始するためのメソッド

useDeferredValueとは

• startTransitionと同じく、トランジションを開始するためのフック
• 更新関数ではなく、コンポーネントで使う（子コンポーネントで使う機会が多いかと思われる）

使いどころ

【共通】

• 緊急性の低い更新関数に使う

  <aside> 🌿 タイプ、クリック、プレスなど、ユーザー操作を直接反映しない更新関数に使う

  </aside>

• トランジションさせたいもの、段階的に遷移させたいstateの更新関数に使う

startTransition

• useTransition を使わなくても大丈夫そうな場合

☆ useTransition【基本的にはこれを使いたい】

• ユーザーにインタラクションを返したい場合
  • 処理に時間がかかりそうで、ユーザーに「ローディング中」「検索中」など伝えた方がよさそうな場合