startTransition

startTransition を使うことで、UI をブロックせずに state を更新することができます。

startTransition(scope)

リファレンス

startTransition(scope)

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

import { startTransition } from 'react';

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

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

さらに例を見る

引数

返り値

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 がレスポンシブに保たれます。例えば、ユーザがタブをクリックしたが、その後気が変わって別のタブをクリックする場合、最初の再レンダーが終了するのを待つことなくそれを行うことができます。

補足

startTransition は useTransition と非常に似ていますが、トランジションが進行中かどうかを追跡する isPending フラグを提供しない点が異なります。useTransition が利用できない場合でも startTransition を呼び出すことができます。例えば、startTransition はコンポーネントの外部、たとえばデータライブラリ内でも動作します。

useTransition ページでトランジションについて学び、例を見ることができます。