startTransition

startTransition(action)

• リファレンス
  • startTransition(action)
• 使用方法
  • 状態更新を非ブロッキングトランジションとしてマークする

リファレンス

startTransition(action)

startTransition 関数を使用すると、状態更新をトランジションとしてマークできます。

import { startTransition } from 'react';

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

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

以下の例を参照してください。

パラメータ

• action: 1つ以上のset 関数を呼び出すことによって、いくつかの状態を更新する関数。Reactはパラメータなしでaction をすぐに呼び出し、action 関数の呼び出し中に同期的にスケジュールされたすべての状態更新をトランジションとしてマークします。action内で待機された非同期呼び出しはトランジションに含まれますが、現在ではawait の後のset 関数を追加のstartTransition でラップする必要があります（トラブルシューティングを参照）。トランジションとしてマークされた状態更新は非ブロッキングになり、不要なローディングインジケーターが表示されません。

戻り値

startTransition は何も返しません。

注意事項

• startTransition は、トランジションが保留中かどうかを追跡する方法を提供しません。トランジション実行中に保留中のインジケーターを表示するには、代わりに useTransition を使用してください。

• 更新をトランジションにラップできるのは、その状態の set 関数にアクセスできる場合のみです。プロップまたはカスタムフックの戻り値に応じてトランジションを開始する場合は、代わりに useDeferredValue を試してください。

• startTransition に渡す関数はすぐに呼び出され、実行中に発生するすべての状態更新をトランジションとしてマークします。たとえば、setTimeout で状態更新を実行しようとすると、トランジションとしてマークされません。

• 非同期リクエスト後の状態更新は、トランジションとしてマークするために、別の startTransition でラップする必要があります。これは既知の制限であり、将来修正する予定です（トラブルシューティング を参照）。

• トランジションとしてマークされた状態更新は、他の状態更新によって中断されます。たとえば、トランジション内でチャートコンポーネントを更新しますが、チャートが再レンダリング中の間にテキスト入力の入力を開始すると、Reactは入力状態の更新を処理した後にチャートコンポーネントのレンダリング作業を再開します。

• トランジション更新を使用してテキスト入力を制御することはできません。

• 複数のトランジションが同時に実行されている場合、React は現在それらをまとめてバッチ処理しています。これは、将来のリリースで削除される可能性のある制限です。

使用方法

非ブロッキングトランジションとしての状態更新のマーク

startTransition呼び出しでラップすることにより、状態更新をトランジションとしてマークできます。

import { startTransition } from 'react';

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

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

トランジションを使用すると、低速なデバイスでもユーザーインターフェースの更新をレスポンシブに保つことができます。

トランジションを使用すると、再レンダリング中でもUIはレスポンシブな状態を維持します。たとえば、ユーザーがタブをクリックした後、考えを変えて別のタブをクリックした場合、最初の再レンダリングが完了するのを待つことなく、その操作を実行できます。