Transition

Reactにおける優先度の低い状態更新のこと

利用用途

状態の更新に優先順位をつけたい

重い状態更新にブロックされずに、別の状態更新を行いたい

Transionは中断可能であるので、更新が終わるまでユーザが待つ必要がない

suspend時にfallbackを表示したくない

fallback中は元のUIを操作できなくなるので。

transitionを使うとsuspend時にfallbackを表示しないようになる

動機

これまではReactのstate更新はバッチ処理されるという前提があった

逆に言うと、stateの更新に優先順位をつけられなかった

軽い更新と重い更新を同時に行ったときに、重い方に合わせられてしまうということ

それにより、UIの応答性が悪くなってしまう

例えば、タブを切り替えるようなUIを考える

タブの切替と、切替時のデータfetchの2つの状態更新がある

code:ts

const tab, setTab = useState('about');

const data, setData = useState(null);

このとき、クリックしたら即UI上でタブが切り替わる様に反応してほしい

前者の更新は軽い更新なのですぐできるはず

しかし、実装によってはfetchが完了するまでタブが切り替わらない

クリックしてるのに数秒間、画面が動かない！となる

他の例だと、タブの切替を素早く複数行ったときに、

1個目のタブのrenderingが完了するまで、次のタブの切り替えができない

これはdocsで動くものを確認できる

これに対処するために、状態更新に優先順位をつけられるようにしたい

そこで、優先度の低い状態更新を表すものとしてTransitionが導入された

startTransitionの中で状態更新を行うことで、それはTransitionと見なされる

code:ts

function handleClick() {

startTransition(() => {

// 重い状態更新

fetchData(activeTab).then(response => setData(response));

});

}

重い状態更新のあるある

fetchの結果を状態に反映するときとか

大量のDOM操作

複雑な計算処理

画像や動画の処理とか

#??

これ、普通に全ての状態更新をtransitionにすればよいのでは

そうした場合にどういう問題が起きるのだろう

renderingが過剰に起こり得るのか

書いてた

In a typical React app, most updates are conceptually transition updates. But for backwards compatibility reasons, transitions are opt-in. By default, React 18 still handles updates as urgent, and you can mark an update as a transition by wrapping it into startTransition. ref

典型的にはほとんどの更新がtransitionにすべきだが、opt-inにした

React の新しい概念「トランジション」で React アプリの応答性を改善する - 30歳からのプログラミング

複数の状態更新と組み合わせた話

トランジションの挙動を調べてみよう｜Reactのトランジションで世界を分岐させるハンズオン

suspenseと組み合わせた話