ReactHooksについてまとめる（Performance Hooks useTransition）

概要

ReactHooksのPerformance Hooksについてのメモ記事です。基本的にReactの公式ドキュメントの咀嚼記事となっています。

今回は useTransition編です。

useTransition

useTransitionは、UIをブロックすることなく状態を更新することができるReact Hookです。

Transitionとは？
→ 遷移や移行という意味を持つ

State更新をノンブロッキングトランジションとしてマーキングする

コンポーネントのトップレベルでuseTransitionを呼び出し、いくつかのState更新を非ブロックトランジションとしてマークします。

useTransitionは2つの要素を持つ配列を返します。

1つ目は保留中の遷移があるかどうかを示す isPendingフラグ。
2つ目は状態の更新をトランジションとしてマークできるstartTransion関数。

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

トランジションは、低速なデバイスでもユーザーインターフェースの更新をレスポンスよく行うことができるようにします。

トランジションを使用すると、再レンダリングの途中でも UI の応答性を維持できます。たとえば、ユーザーがタブをクリックした後、気が変わって別のタブをクリックした場合、最初の再レンダリングが終了するのを待たずに、タブをクリックすることができます。

以下の例を触ってみるとわかりやすいです。

トランジション中にPendingされているビジュアル状態を表示する

useTransitionが返すisPendingブール値を使用して、トランジションが進行中であることをユーザーに示すことができます。例えば、タブボタンに特別な "pending "ビジュアルステートを持たせることができます。

function TabButton({ children, isActive, onClick }) {
  const [isPending, startTransition] = useTransition();
  // ...
  if (isPending) {
    return <b className="pending">{children}</b>;
  }
  // ...

こちらもsandboxの例を見てみましょう。
Post（slow）をクリックしてみると、タブがグレーになり、時間が立つと黒くハイライトされます。このように状態が遷移している際のPending中に表示を切り替えることができます。

参考