10月24日、React Nativeチームは、バージョン0.76をリリースした。
本バージョンではアーキテクチャが刷新されており、React Nativeの今後にとって重要なアップデートとなっている。

新しいアーキテクチャの主な改善点

今回のアップデートでは、以下の4つの重要な要素が導入されている。

新しいネイティブモジュールシステム

JavaScriptとネイティブ層が直接通信できる「JSI（JavaScript Interface）」を利用することで、ブリッジを介さずに同期的な関数呼び出しが可能となった。この変更により、ネイティブモジュールとのやり取りがより効率的かつ高速になった。

const value = nativeModule.getValue();
nativeModule.doSomething(value);

旧アーキテクチャでは、ネイティブ関数の呼び出しに非同期のコールバックを提供する必要があったが、新アーキテクチャでは同期的な関数呼び出しができるため、コードがシンプルになり、パフォーマンスも向上する。

新しいレンダラー

今回導入された新しいレンダラーは、複数のスレッドで同時に複数のUIを処理できるようになった。

これにより、低優先度の更新をバックグラウンドで処理しつつ、ユーザーの入力などの高優先度の更新を即座に処理することができ、UIの応答性が飛躍的に向上した。

また、旧アーキテクチャでは、1つのスレッドでしかレイアウトを計算できなかったため、ユーザー入力などの緊急な更新を同期的に処理することが困難だったが、新しいレンダラーでは、レイアウト情報を複数のスレッドで非同期または同期的に読み取ることが可能となり、ツールチップなどの要素の位置を正確に計算して表示することができる。

C++で書かれたレンダラーは、iOS、Android、Windows、macOSなどの全てのプラットフォームで共通のコードベースを持ち、プラットフォーム間で一貫した描画性能を提供する。この統合により、特定プラットフォーム向けに再実装する必要がなくなり、コードの保守性が向上した。

イベントループの改善

新しいイベントループでは、JavaScriptスレッド上でのタスクの処理順序が厳密に定義されており、Reactがレンダリングを中断してユーザー入力などの緊急タスクを優先的に処理できるようになった。これにより、インターフェースの応答性が向上し、特にユーザーの操作に対して素早く反応できるようになっている。

さらに、イベントループはWeb標準に合わせて実装されており、MutationObserverやIntersectionObserverなどのブラウザ機能のサポートも可能になった。これにより、React Nativeの挙動がWebアプリケーションに近づき、コードの共有がより容易になった。

ブリッジの削除

ブリッジを削除することで、JavaScriptとネイティブ層間の通信が直接かつ効率的になり、アプリの起動時間が大幅に短縮された。旧アーキテクチャでは、ネイティブモジュールの初期化に時間がかかり、アプリの起動時に遅延が発生していたが、新アーキテクチャでは、ブリッジの初期化が不要となったため、この問題が解消された。

加えて、エラーレポートやデバッグ機能も強化され、特にアプリ起動時のJavaScriptクラッシュに対するエラーハンドリングが向上している。これにより、未定義の挙動によるクラッシュを減少させることが可能になった。

React 18との統合と新機能

React Native 0.76では、React 18のすべての機能がフルサポートされており、特にサスペンスやトランジション、自動バッチ処理が大きなポイントとなっている。

サスペンスでは、読み込み状態にある部分を宣言的に定義し、その部分が準備完了になるまでの間に、代替のローディング状態を表示することができる。

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>

トランジションは、UIの緊急でない更新をバックグラウンドで処理し、重要な操作（例: ボタンのクリックや入力）にすぐに反応することができる。これにより、ユーザーの期待に応えるスムーズな操作感を実現している。

import {startTransition} from 'react';
setCount(input);
startTransition(() => {
  setNumberOfTiles(input);
});

また自動バッチ処理により、状態の更新をまとめて処理し、中間状態のレンダリングを減少させることで、パフォーマンスが向上する。これにより、UIの更新がスムーズに行われ、不要なレンダリングが減少する。

詳細は[New Architecture is here · React Native」を参照していただきたい。