概要
React Native 0.76（デフォルトで New Architecture 有効）が npm で利用可能になりました！0.76 のリリース記事では、このバージョンに含まれる重要な変更点の一覧を共有しました。本稿では New Architecture の概要と、React Native の将来に与える影響を説明します。
New Architecture により、Suspense、Transitions、automatic batching、useLayoutEffect といったモダンな React 機能を完全にサポートします。また、ブリッジを介さずにネイティブインターフェースへ直接アクセスでき、型安全なコードを書ける新しい Native Module および Native Component システムも導入されます。
このリリースは 2018 年から取り組んできた React Native の根本的な書き直しの成果で、ほとんどのアプリが段階的に移行できるよう細心の注意を払って設計されています。2021 年には New Architecture Working Group を立ち上げ、コミュニティと協力して React エコシステム全体のスムーズなアップグレード体験を確保してきました。
ほとんどのアプリは他のリリースと同程度の労力で React Native 0.76 に移行できます。主要な React Native ライブラリの多くはすでに New Architecture をサポートしており、旧アーキテクチャを対象としたライブラリとの後方互換性を実現する自動相互運用レイヤーも含まれています。
過去数年にわたり、チームは New Architecture に関するビジョンを公開してきました。見逃した場合は以下の発表を参照してください：
- React Native EU 2019 - The New React Native
- React Conf 2021 - React 18 Keynote
- App.js 2022 - Bringing the New React Native Architecture to the OSS Community
- React Conf 2024 - Day 2 Keynote
New Architecture とは
New Architecture は、コンポーネントのレンダリング方法、JavaScript とネイティブ抽象化間の通信、異なるスレッド間での作業スケジューリングを含む、React Native を支える主要システムを完全に書き直したものです。多くのユーザーが内部実装を意識する必要はありませんが、これらの変更は改善と新機能をもたらします。
旧アーキテクチャでは、React Native は非同期のブリッジを使ってネイティブプラットフォームと通信していました。コンポーネントをレンダリングしたりネイティブ関数を呼び出すためには、関数呼び出しを直列化してブリッジにキューイングし、バックグラウンドで非同期に処理される必要がありました。この方式の利点は、描画更新やネイティブモジュール関数呼び出しのためにメインスレッドがブロックされないことでした。しかし、ユーザーはネイティブアプリのように即時の操作フィードバックを期待するため、いくつかの更新はユーザー入力に同期的に反応して即座に描画される必要があり、進行中のレンダリングを中断する場合もあります。旧アーキテクチャが非同期のみだったため、非同期と同期の両方の更新を許容するよう再設計する必要がありました。
また、ブリッジ越しの関数呼び出しの直列化は、頻繁な更新や大きなオブジェクトに対してボトルネックになりやすく、60+ FPS を安定して達成するのが難しかった点、JavaScript 層とネイティブ層が同期を失った際に同期的に整合できず、リストの空白フレームや中間状態による視覚的ジャンプといったバグが発生した点、そして UI の単一コピーをネイティブ階層でインプレースに変更していたためレイアウト計算は単一スレッドでしか行えず、ユーザー入力のような緊急更新を処理できず、ツールチップ位置の更新のように同期的にレイアウトを読み取れないといった制約がありました。これらすべてが、React の concurrent 機能を適切にサポートすることを妨げていました。
これらの問題を解決するため、New Architecture は次の 4 つの主要要素を含みます：
- The New Native Module System
- The New Renderer
- The Event Loop
- Removing the Bridge
New Module System
新しいモジュールシステムにより、React Native Renderer がネイティブ層へ同期的にアクセスできるようになり、イベント処理、更新のスケジュール、レイアウトの同期／非同期読み取りが可能になります。新しい Native Modules はデフォルトで遅延ロードされるため、アプリのパフォーマンスが大幅に向上します。
New Renderer
新しいレンダラーは複数のスレッドで同時に進行中のツリーを扱えるため、React は複数の並行更新の優先度を処理できます。複数スレッドから同期的／非同期的にレイアウトを読み取ることもサポートし、ジャンクのない応答性の高い UI を実現します。
The Event Loop
新しい Event Loop は JavaScript スレッド上のタスクを明確な順序で処理します。これにより、レンダリングを中断して緊急のユーザーイベントを優先させることが可能になり、web の仕様（microtasks、MutationObserver、IntersectionObserver 等）との整合もとれます。
Removing the Bridge
ブリッジを取り除くことで起動時間が速くなり、JavaScript とネイティブランタイム間の直接通信が可能になって作業切り替えのコストが最小化されます。これによりエラーレポートやデバッグが改善され、未定義動作によるクラッシュの削減にもつながります。
New Architecture はすでに本番環境で利用可能です。Meta（Facebook アプリ）やその他プロダクトでスケール利用されており、Quest 向けに開発した Facebook と Instagram アプリでも React Native と New Architecture を成功裏に利用しました。パートナー企業も数か月にわたり本番で利用しており、Expensify や Kraken の成功事例、そして Bluesky の新リリースもご確認ください。
新しい Native Modules（詳細）
新しい Native Module System は、JavaScript とネイティブプラットフォームの通信方法を大幅に書き換えたものです。C++ で全面的に実装されており、以下のような利点をもたらします：
- ネイティブランタイムへの同期アクセス
- JavaScript とネイティブ間の型安全性
- プラットフォーム間でのコード共有
- デフォルトでの遅延モジュール読み込み
新しいシステムでは、JavaScript とネイティブ層が JSI を通じて同期的に通信できるようになり、非同期ブリッジを使う必要がなくなりました。これによりカスタム Native Modules が同期的に関数を呼び出し、値を返し、別の Native Module 関数にその値を渡すことが可能になります。
旧アーキテクチャでは、ネイティブ関数呼び出しのレスポンスを扱うためにコールバックを渡し、返される値は直列化可能である必要がありました：
nativeModule.getValue(value => {
nativeModule.doSomething(value);
});
New Architecture では、ネイティブ関数を同期的に呼び出せます：
const value = nativeModule.getValue();
nativeModule.doSomething(value);
New Architecture により、C++ ネイティブ実装の完全な性能を活かしつつ、JavaScript/TypeScript API からアクセスできるようになりました。新しい Module System は C++ で書かれたモジュールをサポートしており、一度実装すれば Android、iOS、Windows、macOS といった全プラットフォームで動作します。C++ による実装はより細かなメモリ管理やパフォーマンス最適化を可能にします。
さらに、Codegen により JavaScript 層とネイティブ層の間で強い型付けの契約を定義できます。クロス境界の型エラーはクロスプラットフォームアプリにおけるクラッシュの一般的な原因の一つであり、Codegen はそれらの問題を解消しつつボイラープレートコードを生成します。
最後に、モジュールは遅延ロードになりました。必要になったときにのみメモリにロードされるため、起動時間を短縮し、アプリの複雑化に伴う起動コストの増大を抑えます。
人気のライブラリ react-native-mmkv は新しい Native Modules へ移行したことで以下の恩恵を受けています：
“The new Native Modules greatly simplified setup, autolinking, and initialization for react-native-mmkv. Thanks to the New Architecture, react-native-mmkv is now a pure C++ Native Module, which allows it to work on any platform. The new Codegen allows MMKV to be fully type-safe, which fixed a long-standing NullPointerReference issue by enforcing null-safety, and being able to call Native Module functions synchronously allowed us to replace custom JSI access with the new Native Module API.”
— Marc Rousavy（react-native-mmkv の作者）
New Renderer（詳細）
ネイティブレンダラーも完全に書き直され、次の利点が得られます：
- 更新を異なるスレッド／異なる優先度でレンダリングできる
- レイアウトを同期的に、かつ複数スレッドから読み取れる
- レンダラーは C++ で実装され、全プラットフォームで共有される
新しいネイティブレンダラーはビュー階層を不変（immutable）なツリー構造で保持します。これにより UI のコピーを直接変更せずにスレッドセーフに更新を処理でき、複数の in-progress ツリー（UI の異なるバージョン）を扱えます。その結果、バックグラウンドで更新（例えばトランジション中）をレンダリングして UI をブロックしないようにしたり、ユーザー入力に応じてメインスレッドで同期的にレンダリングしたりできます。
複数スレッドのサポートにより、低優先度の更新を中断してユーザー入力などの緊急更新を優先的にレンダリングし、後で低優先度の更新を再開するといった処理が可能です。レンダラーはスレッドを跨いでレイアウト情報を同期的に読み取れるため、ツールチップの再配置のようなケースでも同期読み取りができます。
さらに、レンダラーを C++ で書き直したことで iOS、Android、Windows、macOS 等の全プラットフォームで同じコードを実行でき、各プラットフォームごとに再実装する必要がなくなるため、一貫したレンダリング機能を提供します。これは我々の Many Platform Vision に向けた大きな一歩です。
例えば View Flattening は以前は Android に限定された最適化でしたが、共有 C++ コアを持つ新しいレンダラーにより iOS でもこの最適化が利用可能になりました。これは自動的に行われ、追加設定は不要です。
これらの変更により、React Native は Suspense や Transitions といった Concurrent React 機能を完全にサポートし、ジャンクや遅延、視覚的ジャンプのない複雑な UI を素早く構築しやすくなりました。今後は FlatList や TextInput といった組み込みコンポーネントにもこれらの新機能を活かした改善を段階的に導入していく予定です。
人気ライブラリの Reanimated はすでに New Renderer を活用しています：
“Reanimated 4, currently in development, introduces a new animation engine that works directly with the New Renderer, allowing it to handle animations and manage layout across different threads. The New Renderer’s design is what truly enables these features to be built without relying on numerous workarounds. Moreover, because it’s implemented in C++ and shared across platforms, large portions of Reanimated can be written once, reducing platform-specific issues, minimizing the codebase, and streamlining adoption for out-of-tree platforms.”
— Krzysztof Magiera（Reanimated の作者）
The Event Loop（詳細）
New Architecture により、明確に定義されたイベントループ処理モデルを実装できました（この RFC を参照）。この RFC は HTML Standard に記載された仕様に従っており、React Native が JavaScript スレッド上でタスクをどのように実行すべきかを定義しています。
明確なイベントループの実装により React DOM と React Native の挙動差分が縮まり、React DOM アプリケーションとより近い挙動が得られるようになりました。これにより "learn once, write anywhere" の体験をより実現しやすくなります。
（参考：RFC、HTML Standard、MutationObserver、IntersectionObserver 等）
New Architecture は既に実運用での使用に耐える成熟度に達しており、今後もさらなる最適化とプラットフォーム横断の改善を続けていきます。