メインコンテンツへスキップ

React Native 0.82 - 新時代

·13分で読めます
Vitali Zaidman
Vitali Zaidman
ソフトウェアエンジニア @ Meta
Nicola Corti
Nicola Corti
ソフトウェアエンジニア @ Meta
Gabriel Donadel Dall'Agnol
Gabriel Donadel Dall'Agnol
ソフトウェアエンジニア @ Expo
Alan Hughes
Alan Hughes
ソフトウェアエンジニア @ Expo

本日、React Native 0.82をリリースすることをお知らせします。これは、完全に新しいアーキテクチャ上で動作する初のReact Nativeです。

これはReact Nativeにとって画期的なリリースであり、新しい時代の幕開けであると信じています。将来のバージョンでは、インストールサイズを削減し、コードベースを合理化するために、レガシーアーキテクチャの残りのコードを削除する予定です。

さらに、0.82では、Hermes V1と呼ばれる新しいバージョンのHermesが試験的にオプションとして導入されます。また、Reactバージョンを19.1.1に更新することで、いくつかのReact機能を有効にし、DOM Node APIのサポートも提供します。

ハイライト

新しいアーキテクチャのみ

React Native 0.76では、新しいアーキテクチャがReact Nativeのデフォルトアーキテクチャになったことを発表しました。

それ以来、新しいアーキテクチャはテストと改良が重ねられ、今回のバージョン以降のReact Nativeでは唯一のアーキテクチャとして採用することに自信を持っています。

これは、AndroidでnewArchEnabled=falseを設定しようとしたり、iOSでRCT_NEW_ARCH_ENABLED=0を指定してCocoaPodsをインストールしようとしても、これらは無視され、アプリは引き続き新しいアーキテクチャを使用して実行されることを意味します。

移行方法

プロジェクトを新しいアーキテクチャに移行していない場合は、まずプロジェクトをReact Native 0.81またはExpo SDK 54に移行することをお勧めします。これらは従来のアーキテクチャを使用できる最後のバージョンです。新しいアーキテクチャへの移行を特に支援するための警告とパフォーマンスの改善が含まれています。
次に、0.81で新しいアーキテクチャを有効にし、アプリケーションが正常に動作していることを確認します。
0.81で新しいアーキテクチャを使用している場合、従来のアーキテクチャの有効化を禁止するReact Native 0.82に安全に更新できます。

互換性のないサードパーティの依存関係が新しいアーキテクチャへの移行を妨げている場合は、ライブラリのメンテナーに直接連絡することをお勧めします。

React Nativeコアのバグが移行を妨げている場合は、Issue Trackerからご連絡ください。

Interop Layers & 3Pライブラリの互換性

私たちは、近い将来、コードベースにInterop Layersを保持します。Interop Layersに必要なすべてのクラスと関数は、すぐに削除されることはありません。Interop Layersの削除に関する今後のアップデートは、今後共有します。

また、両方のアーキテクチャとの下位互換性を提供する3Pライブラリが、新しいアーキテクチャが唯一のアーキテクチャである0.82でも引き続き動作することを確認しました。

Legacy Architectureクラスの削除

下位互換性を確保し、破壊的変更を減らすため、このバージョンではReact NativeのコアからLegacy ArchitectureのAPIを削除していません。Legacy Architectureを削除することで、全体のバンドルサイズを大幅に削減できるため、削除は次のReact Nativeバージョンから開始する予定です。

RFC0929: Removal of the Legacy Architecture of React Nativeで詳細情報を見つけることができます。

実験版 Hermes V1

React Native 0.82は、Hermes V1へのオプトインをサポートします。

Hermes V1はHermesの次の進化形です。私たちは社内のアプリでこれを実験しており、コミュニティも試す時期が来ました。コンパイラとVMの改善により、Hermesのパフォーマンスが向上します。

初期のテストとベンチマークから、Hermes V1はさまざまなシナリオで現在のHermesを上回ります。バンドルの読み込みとTTIが改善されました。改善の度合いは、アプリの詳細に強く依存します。

Expensifyアプリ(実際の複雑なアプリケーション)では、以下の改善が見られました。

メトリクスAndroid (ロースペックデバイス)iOS
バンドルロード時間3.2%高速9%高速
合計TTI7.6%高速2.5%高速
コンテンツTTI7.2%高速7.5%高速

合計TTIでは、バンドルロードからアプリの最初の画面がレンダリングされ、操作可能になるまでの時間を測定しました。

コンテンツTTIでは、コンポーネント自体の最初のレンダリングから、コンポーネントが操作可能になるまでの時間を測定しました。

Hermes V1には、まだJS-to-nativeコンパイル(以前は「Static Hermes」として知られていた)やReact Native EU 2023で発表されたJITコンパイルは含まれていません。これらの機能はまだテスト中であり、進捗があり次第、詳細を共有します。

Hermes V1を有効にする方法

情報

Hermes V1が実験段階にあるため、これを試すにはReact Nativeをソースからビルドする必要があります。将来のReact NativeバージョンでHermes V1がデフォルトとして提供されると、この制限は解除されます。

自分のプロジェクトでHermes V1を試すには、以下の手順を使用してください。

  1. package.jsonファイルの対応するセクションを修正して、実験版のHermes V1コンパイラパッケージを強制的に解決するようにパッケージマネージャーに指示します(現在のバージョン管理規則は、Hermes V1の実験段階のみのものであることに注意してください)。
"resolutions": {
"hermes-compiler": "250829098.0.1"
}
  1. android/gradle.properties内にhermesV1Enabled=trueを追加して、AndroidでHermes V1を有効にします。
android/gradle.properties
hermesV1Enabled=true

また、android/settings.gradleを編集して、React Nativeをソースからビルドするように設定します。

android/settings.gradle
  includeBuild('../node_modules/react-native') {
dependencySubstitution {
substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid"))
substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid"))
substitute(project(":packages:react-native:ReactAndroid:hermes-engine")).using(module("com.facebook.hermes:hermes-android:250829098.0.1"))
}
}
  1. RCT_HERMES_V1_ENABLED=1環境変数を使用してPodをインストールすることで、iOSでHermes V1を有効にします。
RCT_HERMES_V1_ENABLED=1 bundle exec pod install

Hermes V1はプリコンパイルされたReact Nativeビルドと互換性がないため、Podをインストールする際にRCT_USE_PREBUILT_RNCOREフラグを使用しないように注意してください。

  1. アプリがHermes V1を実行していることを確認するには、アプリまたはDevToolsコンソール内で次のコードを実行します。このコードはHermesのバージョンを返し、これは手順1で指定されたバージョン(250829098.0.1)と一致するはずです。
// expecting "250829098.0.1" in Hermes V1
HermesInternal.getRuntimeProperties()['OSS Release Version'];

React 19.1.1

このReact Nativeのリリースには、最新の安定版ReactであるReact 19.1.1が同梱されています。

このReactのリリースには、React Nativeのオーナー・スタックの完全なサポートが含まれています。React Native 0.80で19.1.0のサポートを出荷した際、述べたように@babel/plugin-transform-function-name Babelプラグインを使用している場合、オーナー・スタックは完全にサポートされていませんでした。このリリースではこの制限を解除し、すべてのReact Nativeユーザーに対してオーナー・スタックを有効にします。

変更前変更後
Example error thrown without Owner Stacks
Example error thrown with Owner Stacks

React 19.1.1はまた、React NativeのSuspense境界内でのuseDeferredValueDOM Node API

React Native 0.82から、ネイティブコンポーネントはrefを介してDOMライクなノードを提供します。

以前は、ネイティブコンポーネントはmeasuresetNativePropsのような少数のメソッドのみを持つReact Native固有のオブジェクトを提供していました。このリリース以降、UIツリーをトラバースしたり、レイアウトを測定したりするために、Webと同様にDOM APIのサブセットを実装するノードを提供します。例えば、

function MyComponent(props) {
const ref = useRef();

useEffect(() => {
const element = ref.current;

// New methods
element.parentNode;
element.parentElement;
element.childNodes;
element.children;
const bounds = element.getBoundingClientRect();
const doc = element.ownerDocument;
const maybeElement = doc.getElementById('some-view');

// Legacy methods are still available
element.measure((x, y, width, height, pageX, pageY) => {
/* ... */
});
}, []);

return <View ref={ref} />;
}

さらに、これによりリーフテキストノードTextコンポーネントによって作成される)およびReact Nativeルートノードを表すドキュメントノードへのアクセスが可能になります。

これは下位互換性のある変更であり、新しいノードは従来のメソッド(measureなど)を引き続き実装します。

詳細については、ドキュメントをご確認ください。

その他の変更

Web Performance API (Canary)

React Nativeは現在、Webで利用可能なパフォーマンスAPIのサブセットを実装しています。

これらにより、アプリのランタイムでのパフォーマンスのさまざまな側面(テレメトリ用)を追跡でき、React Native DevToolsのパフォーマンスパネル(今後のReact Nativeバージョンで利用可能)で表示されます。

これらは現在、Canaryリリースレベルでのみ利用可能であり、将来のReact Nativeバージョンで安定版としてリリースされます。

Android向けに最適化されたデバッグビルドタイプ

React Native 0.82以降、開発体験をスピードアップするためにdebugOptimizedビルドタイプを使用できるようになります。

これまで、Androidは2つのデフォルトビルドバリアントを作成してきました。

  • debug: 開発時にデフォルトで使用され、React Native DevTools、Metro、Android JVMおよびC++デバッガーなどのさまざまなデバッガーツールに接続できます。
  • release: アプリケーションを本番環境に出荷する際に使用されます。これは完全に最適化されており、難読化と最適化によりデバッグが困難になります。

ほとんどのReact Native開発者は開発時にC++デバッガーを使用する必要がないため、debugOptimizedビルドタイプを導入しました。

debugOptimizedを使用すると、いくつかのC++最適化が有効になったReact Nativeビルドを実行しているため、アニメーションと再レンダリングが高速化されます。同時に、React Native Dev Toolsを使用してJavaScriptコードをデバッグすることもできます。

debugOptimizedを使用する場合、C++ネイティブデバッガーを使用することはできませんが、デバッグビルドタイプを使用する場合は引き続き使用できます。

アプリのdebugOptimizedバリアントを実行するには、次のように呼び出すことができます。

npx react-native run-android --mode debugOptimized
情報

debugOptimizedビルドタイプは、React Native 0.81およびExpo SDK 54にもバックポートされています。

debugOptimizedが動作している様子を、画面上でいくつかのアニメーションをレンダリングしているこれらのサンプルで見ることができます。

debugで実行されているビルドは約20FPSで実行されていますが、debugOptimizedのビルドは約60FPSで実行されています。

debugdebugOptimized
Example build running with debugExample build running with debugOptimized

破壊的変更

キャッチされないPromiseの拒否がconsole.errorを発生させるようになります

以前のバージョンでのキャッチされないJavaScriptエラーの報告の改善に続き、今後はキャッチされないPromiseもそのメカニズムを通じて報告されるようになります。

Example of a promise rejection reported to console

バグにより、これらは以前は完全に無視されていました。したがって、React Native 0.81にアップグレードした後、以前から存在していたエラーが表面化する可能性があることをご了承ください。そのため、以前から存在していたエラーがバックエンドに報告されるJavaScriptエラーとして表面化し、新しい報告が急増する可能性があります。

その他の破壊的変更

一般

  • ReactNativeFeatureFlagssrc/privateに移動
    • ReactNativeFeatureFlagsはプライベートAPIであるため、一般的には依存すべきではありません。
  • Appearance.setColorScheme()の型が更新され、nullableな値を受け入れなくなりました。
    • カラーテーマをリセットする必要があるエッジケースでは、null/undefinedの代わりに'unspecified'を使用してください。

iOS

  • RCTDisplayLinkをレガシーAPIのRCTModuleDataから移行しました。これは将来的に削除を予定しているためです。

Android

  • com.facebook.react.bridge.JSONArgumentsクラスは誤ってpublicだったため削除されました。
  • MessageQueueThreadPerfStatsを非推奨に
    • このAPIは非推奨となり、スタブに置き換えられました。提供される統計は信頼できなかったため、このAPIの統計に依存すべきではありません。
  • Gradleを8.xから9.0.0にバンプ
    • Gradle 9.0.0の次のメジャー安定版でのすべての変更のリストはこちらで入手できますが、ユーザーへの影響は全くないと予想されます。

C++

  • CallbackWrapper.h / LongLivedObject.h の後方互換性ヘッダーを削除
    • これらのヘッダーの正しいインクルードは#include <react/bridging/LongLivedObject.h>#include <react/bridging/CallbackWrapper.h>です。
    • #import <ReactCommon/….h>の下にある古いインクルードは使用しないでください。

0.82のCHANGELOGで破壊的変更の完全なリストを読んでください。

謝辞

React Native 0.82には、93人の貢献者からの868以上のコミットが含まれています。皆様の多大なご尽力に感謝いたします!

このリリースで重要な貢献をしてくださったコミュニティメンバーに特別な感謝を捧げたいと思います。

  • Dawid MałeckiJakub Piaseckiには、Hermes V1の展開にご協力いただきました。
  • Krystof Woldrichには、キャッチされないPromiseの拒否が飲み込まれる問題を修正するためのご支援をいただきました。
  • Riccardo Cipolleschiには、上記のReact 19.1.1とHermes V1の段落の執筆にご協力いただきました。
  • Rubén Norteには、DOM APIとPerformance APIの段落の執筆にご協力いただきました。
  • Tomasz Zawadzkiには、debugOptimizedのベンチマークにご協力いただきました。

0.82へのアップグレード

既存のプロジェクトのReact Nativeバージョン間のコード変更を確認するには、新しいバージョンへのアップグレードドキュメントに加えて、React Native Upgrade Helperを使用してください。

新しいプロジェクトを作成するには

npx @react-native-community/cli@latest init MyProject --version latest

Expoを使用している場合、React Native 0.82はexpo@canaryリリースの一部として利用可能になります。

次のSDK、SDK 55は、次のReact Nativeの安定版リリースである0.83と共に出荷されます。

情報

0.82は現在、React Nativeの最新の安定版であり、0.79.xはサポート対象外となります。詳細については、React Nativeのサポートポリシーを参照してください。