React18のAutomaticBatchingを試してみた

最近 React18beta がリリースされたので紹介していきます。 React18 で追加される大きな新機能は下記の通りです。 Concurrent Rendering（並行レンダリング） SSR support for Suspense（サスペンスの SSR サポート） Automatic Batching（自動バッチ処理） Selective hydration（選択的ハイドレーション） Built-in Cache（組み込みキャッシュ機構） 今回は自動バッチ処理を React17 と比較してみたいと思います。 今までは関数内でのみバッチ処理を行っていました。 しかし、React18 からはどこから発生したか関係なくすべてのレンダリングがバッチ処理されるようになります。 creat-react-app のコードを流用して実装します。 React18 を導入するためには ReactDOM.render から ReactDOM.createRoot への移行が必須です。 検証用のコードです。 onClick で clickHandler 関数を実行します。 clickHandler 関数は setTimeout で非同期でステートを更新します。 以前の React であれば非同期処理内のステート更新は別々のレンダリングでした。 しかし、React18 ではバッチ処理が行われ、一回でレンダリングしているのがわかります。 React17 React18 flushSync でバッチ処理をオプトアウトできます。 React18 flushSync のコールバック関数内に切り出せばバッチ処理されません。 公式に書かれている通り StrictMode で実装していればほぼゼロコストでマイグレーションが可能です。破壊的変更（過去のコードに影響する変更）はオプトインになり、 Automatic Batching などのあまり影響のない変更はデフォルトで有効になるそうです。 React18 のアップデートするだけでもパフォーマンス向上が見込めるので、まだ一般向けリリースまで数か月ありますがアップデートに向けて準備しておくのもいいかもしれません。