グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



React18 beta の新機能を紹介する【Automatic Batching (自動バッチ処理)編】

最近 React18beta がリリースされました。今回は、React18 で追加される大きな新機能の中から「Automatic Batching(自動バッチ処理)」についてご紹介します。

React18 の新機能

React18 で追加される大きな新機能は下記の通りです。

  • Concurrent Rendering(並行レンダリング)
  • SSR support for Suspense(サスペンスの SSR サポート)
  • Automatic Batching(自動バッチ処理)
  • Selective hydration(選択的ハイドレーション)
  • Built-in Cache(組み込みキャッシュ機構)

今回は自動バッチ処理を React17 と比較してみたいと思います。

インストール

AutomaticBatching(自動バッチ処理)を検証

今までは関数内でのみバッチ処理を行っていました。
しかし、React18 からはどこから発生したか関係なくすべてのレンダリングがバッチ処理されるようになります。

creat-react-app のコードを流用して実装します。

React18 を導入するためには ReactDOM.render から ReactDOM.createRoot への移行が必須です。

検証用のコードです。
onClick で clickHandler 関数を実行します。
clickHandler 関数は setTimeout で非同期でステートを更新します。

以前の React であれば非同期処理内のステート更新は別々のレンダリングでした。
しかし、React18 ではバッチ処理が行われ、一回でレンダリングしているのがわかります。

React17

React18

バッチ処理をオプトアウトできる API

flushSync でバッチ処理をオプトアウトできます。

React18

flushSync のコールバック関数内に切り出せばバッチ処理されません。

さいごに

React 18 における並行レンダリングはオプトインになるため、コンポーネントの振る舞いにおいてデフォルトで大きな破壊的変更があるということはなくなります。 いつものメジャーリリースの時に要する労力と大差ないレベルの最小限の書き換えで、あるいは書き換えゼロで、React 18 にアップグレードすることができます。 「React 18に向けてのプラン」より引用React 18に向けてのプラン

公式に書かれている通り StrictMode で実装していればほぼゼロコストでマイグレーションが可能です。破壊的変更(過去のコードに影響する変更)はオプトインになり、 Automatic Batching などのあまり影響のない変更はデフォルトで有効になるそうです。

React18 のアップデートするだけでもパフォーマンス向上が見込めるので、まだ一般向けリリースまで数か月ありますがアップデートに向けて準備しておくのもいいかもしれません。

The following two tabs change content below.

Riku-S

事業開発部 web application engineer
高校の情報技術科でc言語やネットワークに関する知識を学ぶ。一時は公務員を目指すが、エンジニアの夢を捨てきれずエンジニアとしてアーティスへ入社。現在、事業開発部としてGo言語を使用した自社サービスの開発に携わっている。 資格:情報検定、ITパスポート試験
この記事のカテゴリ

FOLLOW US

最新の情報をお届けします