React 18がリリースされた。待望の同時レンダラーが含まれている。これにより、Reactは、レンダリングプロセスを中断する機能など、いくつかの機能が改善される。
React 18まで、Reactレンダリングプロセスは同期的であり、中断することができなかった。その結果、UIは長いレンダリングプロセス中にロックされ、ユーザ入力にすぐに応答できなかった。
新しい並列レンダラーを使うと、レンダリングプロセスが非同期となる。中断、一時停止、再開、さらには放棄することもできるようになる。これにより、開発者はより滑らかなユーザエクスペリエンスを提供できる。
Reactチームは、ほとんどのアプリケーション開発者が新しい並列モードと直接やり取りすることを想定していない。そうではなく、ほとんどの場合、サードパーティのライブラリとフレームワークを介して使われることを想定している。
新しい並列レンダラーを有効にし、以下で説明する新機能の恩恵を受けるには、開発者は新しいcreateRootメソッドを使ってクライアントレンダリングAPIを更新する必要がある。完全な説明は、公式のアップグレードガイドにある。
自動バッチ処理は、新たなパフォーマンス強化の機能である。これにより、状態の更新が非同期イベントやネイティブイベントで発生した場合でも、Reactが単一の再レンダリングで状態の更新をバッチ処理できるようになる。
次のコードでは、setTimeout内に2つのカウンターが設定されている。React 18より前では、これは2つの別々のレンダリングとなる。新しい自動バッチ処理により、Reactは2つの状態の変更を1つの再レンダリングにグループ化できるようになった。
名前が示すように、この最適化は裏で行われ、開発者の介入を必要としない。
setTimeout(() => {
setCount1(c => c + 1);
setCount2(c => c + 2);
}, 100);
トランジションはReactの新しい概念である。これにより、開発者は変更に対して、緊急でないことを示すフラグを立てることができる。これは、キーの押下やマウスのクリックなどの緊急の更新によって中断される可能性があることを意味する。
状態の更新を緊急でないとしてマークするために、開発者は、次の例のように、新しいstartTransitionメソッドでそれらをラップできる。
startTransition(() => {
setFilter(newFilter);
});
上記のように、ほとんどのアプリケーション開発者に対して、このAPIを直接使用することは想定されていない。
React Suspense APIは、並列レンダリング用に再実装されており、それによってサーバーレンダリングが改善される。開発者は、spinnerなどのプレースホルダーを最初にロードすることで、サイトのロードをブロックしてしまうロードの遅いコンポーネントを迂回できるようになった。
アプリケーションの残りの部分を最初にロードして、空白画面で待機時間が長く続く可能性を回避できる。
サスペンスAPIの新機能について詳しく知りたい開発者は、サスペンス Request For Commentsを読むと深い考察ができるようになるであろう。残念ながら、新しいサスペンスAPIのドキュメントはわずかしかない。
最後に、Reactは将来、状態を維持しながらUIのセクションを削除する機能を追加する予定である。現在のコンポーネントが今後の機能と互換性があることを検証するために、Reactは開発目的用に新しいチェック項目をStrict Modeに追加した。