React 18リリース候補版が公開。Automatic BatchingやServer-Side Renderingのストリーミング対応による速度向上、IE対応の終了など

今回は「React 18リリース候補版が公開。Automatic BatchingやServer-Side Renderingのストリーミング対応による速度向上、IE対応の終了など」についてご紹介します。

関連ワード (ライブラリ、処理、連続処理等) についても参考にしながら、ぜひ本記事について議論していってくださいね。

本記事は、Publickey様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。


JavaScript対応のUIライブラリである「React」の最新版、「React 18」のリリース候補版が公開されました。

Our next major version, React 18, is available as a Release Candidate. If you’d like to help us prepare for the stable release, follow this upgrade guide and let us know if you find any issues! https://t.co/PrgSEgNq3L

— React (@reactjs) March 8, 2022

React 18では、Automatic Batchingと呼ばれる機構が追加されました。

これは、連続してステートの変更が行われる場合、そのたびにレンダリングの処理が走っていたところを、まとめて一回のレンダリング処理が走るだけになることで、速度が向上するというもの。

React 18以前では、Reactのイベントハンドラによる連続処理では、このようなレンダリングのまとめが行われていましたが、React 18では「createRoot」を用いることで、あらゆるステートの変更に対してこうした処理が行われるようになります。

Server-Side Renderingについても「Streaming HTML」と「Selective Hydration」によって速度向上が実現されます。

Streaming HTMLは、サーバサイドでHTMLを生成する際に、すべてのデータが揃わなくとも、データがかけているところはプレースホルダを置いてHTMLを生成してクライアントに投げてしまい、データが取得できたタイミングであとからプレースホルダを実際のデータに置き換える、という処理をReactが行ってくれる、というもの。

サーバがデータ取得の途中でもクライアントでHTMLを受け取って表示を開始できるため、見かけ上の性能が向上します。

Selective Hydrationは、クライアントのHTMLにイベントハンドラをアタッチする場合、アタッチする部分を見つけるために必要とされるHTMLのレンダリングを行うJavaScriptが全部読み込まれていなくとも、先にレンダリング可能なところからイベントハンドラをアタッチしていく処理を可能にする、というものです。

これも読み込みの遅いJavaScriptに処理をブロックされることが減るため、速度の向上につながります。

またReact 18からはInternet Explorerのサポートもなくなります。

React 18の正式版は、今回のリリース候補版のリリースから2週間~4週間後に登場予定となっています。

COMMENTS


Recommended

TITLE
CATEGORY
DATE
フェンシングの剣を操り、美少女リズムゲープレイ……DNP「スマートeスポーツ」
企業・業界動向
2021-07-09 14:01
パナソニック、米ソフトウェア大手買収へ協議
IT関連
2021-03-11 13:46
商業車用サービスパーツを販売するいすゞA&S、採用管理システム採用
IT関連
2024-02-07 20:33
バーチャル入学・卒業式開催サービス、clusterで提供 最短1週間で会場を構築
最近の注目ニュース
2021-02-04 14:35
Kaseya攻撃のREvil、Moneroとは別にビットコインでも78億円請求か
セキュリティ
2021-07-07 19:40
Epic Games、ソニーなどから10億ドルの資金調達 クリエイター支援に活用
企業・業界動向
2021-04-15 22:42
「モダン」を目指すPCの展開や運用の今どき事情
IT関連
2022-05-12 11:45
凸版、インターナルカーボンプライシング制度導入へ–CO2排出量をコスト換算
IT関連
2023-03-07 00:21
自然の中に隠れたポケモン探す「ポケモンワンダー」、よみうりランドに17日オープン
くらテク
2021-07-02 05:45
全355話を網羅する「Gメン’75」のDVDマガジン、デアゴスティーニが創刊
くらテク
2021-04-21 21:39
WebAssemblyランタイム「Wasmer 2.1」リリース。WASI用に仮想ファイルシステムを実装し、ブラウザでもWASIが利用可能に
Deno
2022-01-12 18:47
New Normalで求められる新しい働き方のDXに役立つ NECが提案する「デジタルワークプレイス」とは?
PR
2021-03-05 07:24
山梨中央銀行、勘定系システムをAzure環境に移行
IT関連
2022-03-17 04:14
英国、独自のNFTを2022年夏までに作成へ
IT関連
2022-04-06 13:56