startTransition

React v18で関数として提供されるようになった

(以前からuseTransitionはあった)

state更新をTransitionとみなすために使う

state更新処理をwrapして使う

docs

New feature: startTransition · reactwg react-18 · Discussion #41 · GitHub

callback関数の中で、state更新を行う

すると、そのstate更新はTransitionとして扱われる

v18では同期関数しか渡せなかったが、v19からasync transitionにも対応した

typescript

function handleClick() {

startTransition(() => {

// ここで優先度の低い状態更新を行う

setState(newState);

});

}

callback関数自体は即座に実行される ref

例えば、以下のコードを実行すると即座に3つのconsole.logが実行される

typescript

console.log(1);

startTransition(() => {

console.log(2);

setPage('/about');

});

console.log(3);

あくまでも、その中のstate更新をTransitionとみなすだけ

callback関数の実行が遅延されるわけではない

使用

reactから直接importするか

typescript

import { startTransition } from 'react';

useTransitionの返り値から使用できる

typescript

const [isPending, startTransition] = useTransition();