startTransition

startTransition(scope)

• リファレンス
  • startTransition(scope)
• 使用法
  • state 更新をノンブロッキング�?トランジションとしてマークする

リファレンス

startTransition(scope)

startTransition 関数を使用すると、state �?更新をトランジションとしてマークすることができます。

import { startTransition } from 'react';

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

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

さらに例を見る

引数

• scope: 1 つ以上�? set 関数を呼び出して state を更新する関数。React は引数なしで直ちに scope を呼び出し、scope 関数呼び出し中に同期的にスケジュールされたすべて�? state 更新をトランジションとしてマークします。こ�?ような更新はノンブロッキングになり、不要なローディングインジケータを表示しないようになります。

返り値

startTransition は何も返しません。

注意点

• startTransition は、トランジションが保留中 (pending) であるかどうかを知るため�?方法を提供しません。トランジション�?進行中にインジケータを表示するには、代わりに useTransition が必要です。

• state �? set 関数にアクセスできる場合に�?み、state 更新をトランジションにラップできます。ある props やカスタムフック�?値に反応してトランジションを開始したい場合は、代わりに useDeferredValue を試してみてください。

• startTransition に渡す関数は同期的でなければなりません。React はこ�?関数を直ちに�?�行し、そ�?�?�行中に行われるすべて�? state 更新をトランジションとしてマークします。後になって（例えばタイムアウト内で）さらに state 更新をしようとすると、それらはトランジションとしてマークされません。

• トランジションとしてマークされた state 更新は、他�? state 更新によって中断されます。例えば、トランジション内でチャートコンポーネントを更新した後、チャート�?再レンダー�?途中で入力フィールドに入力を始めた場合、React は入力欄�?更新�?処理後にチャートコンポーネント�?レンダー作業を再開します。

• トランジションによる更新はテキスト入力欄�?制御には使用できません。

• 進行中�?トランジションが複数ある場合、React は現在それらをひとつに束ねる処理を行います。こ�?制限は将来�?リリースではおそらく削除されます。

使用法

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

state 更新をトランジションとしてマークするには、それを startTransition �?呼び出しでラップします。

import { startTransition } from 'react';

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

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

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

トランジションを使用すると、再レンダー�?途中でも UI がレスポンシブに保たれます。例えば、ユーザがタブをクリックしたが、そ�?後気が変わって別�?タブをクリックする場合、最初�?再レンダーが終了する�?を待つことなくそれを行うことができます。