並行レンダリング とは？

React 17以前のレンダリングは「同期的」だったんだよ。一度始めたら途中で止められなくて、重い処理があるとその間ずっとブラウザが固まってしまっていたんだ。

そうだよ。例えば大量のリストをレンダリングしている最中にキーボードを打っても、レンダリングが終わるまで文字が表示されない問題があったんだ。並行レンダリングは「レンダリングを中断して、先にユーザー入力を処理する」ことを可能にするよ。

useTransitionフックが重要だよ。startTransitionで囲んだ更新は「低優先度」としてマークされるんだ。例えば検索フォームの入力は高優先度、検索結果の表示は低優先度にすると、タイプしながらリストが更新されてもカクつかない体験が作れるんだね。

Suspenseはデータ取得中の「待ち状態」を宣言的に書ける仕組みで、並行レンダリングと組み合わせると強力なんだ。コンポーネントのレンダリングをデータが揃うまで「一時停止」して、準備できたら再開するという流れを自然に書けるようになるよ。

ReactDOM.renderからReactDOM.createRootに移行する必要があるよ。ただしほとんどの既存コードはそのまま動くし、並行機能はオプトインで使う設計になっているんだ。useTransitionやuseDeferredValueを意識的に使って初めて恩恵が出るから、ユーザー体験のどこがボトルネックかを見極めてから導入するのが効果的だよ。