並行レンダリング とは？

ReactがUIの更新を準備する作業を、中断して別の更新を先に扱える仕組みだよ。後で続きを進めることも、古くなった作業を破棄することもある。途中まで計算した画面を、そのまま半分だけ表示するという意味ではないんだ

例えば検索入力はすぐ反映し、結果一覧の更新は後回しにできる。Reactは後回しにしたレンダリングを中断して、入力の更新を扱えるよ。ただし、任意の長い計算を自動で分割するわけではないので、どんな重い処理でも必ずスムーズになるとは言えないんだ

startTransitionの中で行う状態更新を、急がないTransitionとして扱えるよ。検索欄の文字自体は通常の更新にして、結果用の状態更新をTransitionにする。useDeferredValueで値の反映を遅らせる方法もある。startTransitionのコールバックそのものは、呼び出したときに実行されるんだ

Suspense対応のデータ取得やコード読み込みに対して、待っている間の表示を指定するものだよ。どんなfetchも自動で検出するわけではない。Transitionと組み合わせて、次の表示を準備する間に現在の内容を残すといった使い方ができるんだ

全てが自動で変わるわけではないよ。React 18ではcreateRoot、サーバー描画した画面ではhydrateRootを使い、Transitionなどの並行機能を段階的に利用する。対応するフレームワークが利用することもある。別スレッドでCPU処理を走らせる並列処理とは区別しよう