React Native 0.83 — React 19.2、DevToolsの新機能、ユーザー向け破壊的変更なし | React Native

claudejamodel: claude-sonnet-4-20250514

React Native 0.83 - React 19.2、新しいDevTools機能、破壊的変更なし

本日、React Native 0.83のリリースを発表できることを嬉しく思います！このリリースには、React 19.2、React Native DevToolsの重要な新機能、Web PerformanceとIntersection Observer API（Canary）のサポートが含まれています。また、これはユーザー向けの破壊的変更がない初のReact Nativeリリースでもあります。

ハイライト

React 19.2
新しいDevTools機能
Intersection Observers（Canary）
Web Performance APIの安定版

React 19.2

このリリースには、React 19.2が含まれており、新しい<Activity>とuseEffectEvent APIがReact Nativeに導入されます。

重要：CVE-2025-55182

リリース時点で、react-native@0.83.0はreact@19.2.0に依存しており、最近のReact Server Componentsの重大なセキュリティ脆弱性についてもご存知かもしれません。React Nativeは影響を受けるパッケージに依存していないため、この脆弱性の直接的な影響を受けないことを強調したいと思います：

react-server-dom-webpack
react-server-dom-parcel
react-server-dom-turbopack

ただし、これらのパッケージが存在する可能性のあるmonorepoの一部としてReact Nativeを使用している場合は、すぐに確認してアップグレードしてください。次のパッチリリースで、すべてのReact依存関係を19.2.1に更新する予定です。

`<Activity>`

<Activity>を使用すると、アプリを制御および優先順位付けできる「アクティビティ」に分割できます。アプリの一部を条件付きでレンダリングする代替手段としてActivityを使用でき、現在2つのモードをサポートしています：'visible'と'hidden'。

hidden：子要素を非表示にし、エフェクトをアンマウントし、Reactが作業を完了するまですべての更新を延期します。
visible：子要素を表示し、エフェクトをマウントし、更新を通常通り処理できるようにします。

<Activity>を使用して非表示にされたツリーの興味深い機能の1つは、状態を保持することです。そのため、再び表示されるときに、例えば検索ステータスや以前のユーザーインタラクションからの選択を保持します。

<Activity>の詳細については、Reactドキュメントをご覧ください。

useEffectEvent

useEffectの一般的なパターンの1つは、外部システムからの何らかの「イベント」についてアプリコードに通知することです。このアプローチの問題は、そのようなイベント内で使用される値の変更により、周囲のEffectが再実行されることです。

これを解決するために、ほとんどのユーザーはlintルールを無効にして依存関係を除外します。しかし、後でEffectを更新する必要がある場合、リンターが依存関係を最新の状態に保つのを手助けできなくなるため、バグにつながる可能性があります。

useEffectEventを使用すると、このロジックの「イベント」部分を、それを発行するEffectから分離できます。

useEffectEventの詳細については、Reactドキュメントをご覧ください。

新しいDevTools機能

0.83では、React Native DevToolsに長らく待望されていた機能と生活の質の向上をお届けできることを嬉しく思います。

NetworkとPerformanceパネル

ネットワーク検査とパフォーマンストレースは、React Native DevToolsの2つの強力な新機能で、本日利用可能です。

ネットワーク検査は、すべてのReact Nativeアプリで利用可能になり、アプリが行うネットワークリクエストを表示して理解できます。ログに記録されたリクエストは、タイミングや送受信されたヘッダーなどの詳細なメタデータ、およびレスポンスプレビューを提供します。そして、初めて、Initiatorタブを使用してコード内のどこでネットワークリクエストが発生したかを確認できます。

💡 ネットワークイベントカバレッジ、Expoサポート

どのネットワークイベントがキャプチャされますか？ 現在、fetch()、XMLHttpRequestを通じたすべてのネットワーク呼び出しを記録しており、Expo Fetchなどのカスタムネットワーキングライブラリのサポートは後日提供予定です。

Expoネットワークの違い このため、Expoを使用するアプリでは引き続き「Expo Network」パネルが表示されます。これはExpoフレームワークによる別の実装で、これらの追加のリクエストソースをログに記録しますが、機能がやや制限されています。

Expo固有のネットワークイベントのカバレッジ
リクエストイニシエーターサポートなし
Performanceパネル統合なし

今後のリリースで、Expo Fetchとサードパーティネットワーキングライブラリを新しいネットワーク検査パイプラインに統合するため、Expoと協力しています。

パフォーマンストレースを使用すると、アプリ内でパフォーマンスセッションを記録して、JavaScriptコードがどのように実行されているか、どの操作が最も時間を要したかを理解できます。React Nativeでは、JavaScript実行、Reactパフォーマンストラック、ネットワークイベント、カスタムユーザータイミングを単一のパフォーマンスタイムラインで表示します。

0.83でのWeb Performance APIのサポートと合わせて、これはReact Nativeアプリを遅くしている可能性のあるものに対する細かい可視性を提供する強力な機能セットです。

Performanceパネルを試して、日常のワークフローの一部にすることをお勧めします。

最新のReact Native DevTools機能とReactパフォーマンストラックについて詳しく学んでください。

新しいデスクトップアプリ

以前、React Native DevToolsはブラウザウィンドウで起動し、ChromeまたはEdgeのインストールが必要でした。本日、新しいバンドルされたデスクトップアプリで大幅に改善されたデスクトップエクスペリエンスを導入します。特徴：

以前と同じゼロインストールセットアップ、Webブラウザ要件なし
軽量で公証されたデスクトップバイナリによる高速起動。これをダウンロードできない稀なケース（企業ファイアウォールなど）では、以前のブラウザ起動フローにフォールバックします。
より良いウィンドウ管理、macOSでの改善されたマルチタスキング、ブレークポイントでの自動表示、同じアプリへの再接続時の自動表示、再起動時の保存されたウィンドウ配置
個人のブラウザプロファイルとは別にDevToolsを実行することによる信頼性の向上。特に、これは特定のプリインストールされたChrome拡張機能がReact Native DevToolsを破壊するというバグレポートを解決します。

Intersection Observers（Canary）

Web APIをReact Nativeに導入する取り組みの一環として、0.83のcanaryリリースでIntersectionObserverのサポートを追加しました。

IntersectionObserverを使用すると、ターゲット要素とその祖先間のレイアウト交差を非同期で観察できます。

詳細については、APIと実装ドキュメントをご覧ください。RNTesterにも例を含めています。

その他の変更

Web Performance APIの安定版

0.82で導入されたように、React NativeはWebで利用可能なPerformance APIのサブセットを実装しており、現在安定版として展開されています：

High Resolution Time：performance.now()とperformance.timeOriginを定義
Performance Timeline：PerformanceObserverとperformanceオブジェクトのパフォーマンスエントリにアクセスするメソッド（getEntries()、getEntriesByType()、getEntriesByName()）を定義
User Timing：performance.markとperformance.measureを定義
Event Timing API：PerformanceObserverに報告されるイベントエントリタイプを定義
Long Tasks API：PerformanceObserverに報告されるlongtaskエントリタイプを定義

これらのAPIにより、React Native DevToolsのPerformanceパネルで表示されるアプリのパフォーマンスのさまざまな側面を追跡でき、PerformanceObserverを介してランタイムでも利用できます。

PerformanceObserverは本番ビルドでも動作し、アプリで実世界のパフォーマンスメトリクスをキャプチャする新しい機会を開きます。

実験的 - Hermes V1

Hermes V1は、JavaScriptパフォーマンスを大幅に向上させるコンパイラとVMの改善を含むHermesの次の進化です。React Native 0.82では、Hermes V1を実験的なオプトインとしてリリースしました。0.83では、Hermes V1にさらなるパフォーマンス改善が含まれています。

💡 Hermes V1の有効化

注意：Hermes V1が実験段階にある間は、試すためにReact Nativeをソースからビルドする必要があります。

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

package.jsonファイルの対応するセクションを変更して、パッケージマネージャーにHermes V1コンパイラパッケージの実験バージョンを解決するよう強制します（現在のバージョニング規則はHermes V1の実験段階のみです）：

yarn

"resolutions": {
  "hermes-compiler": "250829098.0.4"
}

npm

"overrides": {
  "hermes-compiler": "250829098.0.4"
}

android/gradle.properties内にhermesV1Enabled=trueを追加してAndroid用のHermes V1を有効にします：

hermesV1Enabled=true

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

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"))
  }
}

RCT_HERMES_V1_ENABLED=1環境変数でpodsをインストールしてiOS用のHermes V1を有効にします：

RCT_HERMES_V1_ENABLED=1 bundle exec pod install

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

アプリがHermes V1を実行していることを確認するには、アプリまたはDevToolsコンソール内で以下のコードを実行します。このコードはHermesバージョンを返し、ステップ1で指定したバージョン（250829098.0.1）と一致するはずです：

// Hermes V1では "250829098.0.1" を期待
HermesInternal.getRuntimeProperties()['OSS Release Version'];

実験的 - iOSでLegacy Architectureをコンパイルアウト

このリリースでは、コードベースからLegacy Architectureをコンパイルアウトできる新しいiOS用フラグを追加しています。アプリが既にNew Architectureを使用している場合、以下でpodsをインストールしてlegacy architectureコードを削除できます：

RCT_REMOVE_LEGACY_ARCH=1 bundle exec pod install

これにより、ビルド時間とアプリサイズの両方が削減されるはずです。改善は使用しているサードパーティライブラリの数によって異なります：テストでは、依存関係のない新しいアプリを使用して、ビルド時間が73.0秒から58.2秒に短縮され、アプリサイズが51.2 Mbから48.2 Mbになりました。

info RCT_REMOVE_LEGACY_ARCHはReact Nativeプリコンパイルバイナリと互換性がありません。プリコンパイルバイナリを使用している場合は、podsを再インストールしてアプリをソースからビルドする必要があります。

実験的 - iOSでプリコンパイルバイナリをデバッグ

このリリースでは、プリコンパイルバイナリに同梱されているReact Nativeコードをデバッグする機能を実装しました。これは主にライブラリメンテナーや、ネイティブモジュールまたはネイティブコンポーネントを開発している場合に役立ちます。

React Nativeプリコンパイルバイナリに同梱されているバイナリコードをデバッグするには、以下の手順に従ってください：

# プロジェクトのiosフォルダから
bundle exec pod cache clean --all
bundle exec pod deintegrate
RCT_USE_RN_DEP=1 RCT_USE_PREBUILT_RNCORE=1 RCT_SYMBOLICATE_PREBUILT_FRAMEWORKS=1 bundle exec pod install
open your-project.xcworkspace

魔法はRCT_SYMBOLICATE_PREBUILT_FRAMEWORKSフラグによって行われ、CocoaPodsにReact Native dSYMファイルをダウンロードして適切なフォルダに展開するよう指示します。

この時点で、例えばAppDelegate.swiftにブレークポイントを設定し、Xcodeからアプリをビルドして実行できます。アプリケーションが一時停止したら、Xcodeコンソールを開いてLLDBコマンドを実行します：

# シミュレーターでアプリを実行している場合
add-dsym path-to-your-app/ios/Pods/React-Core-prebuilt/React.xcframework/ios-arm64_x86_64-simulator/React.framework/dSYMs/React.framework.dSYM

# 物理デバイスでアプリを実行している場合
add-dsym path-to-your-app/ios/Pods/React-Core-prebuilt/React.xcframework/ios-arm64/React.framework/dSYMs/React.framework.dSYM

これで、React Nativeコードにステップインできます。

破壊的変更

React Nativeリリースをより予測可能で、アップグレードしやすくするために懸命に取り組んでいます。React Native 0.83は、ユーザー向けの破壊的変更がない初のリリースです。

React Native 0.82を使用している場合、アプリコードを変更することなく、アプリをReact Native 0.83にアップグレードできるはずです。

破壊的変更と見なすものについて詳しく学ぶには、この記事をご覧ください。

非推奨

このリリースでは、Android固有の2つの非推奨が含まれています：

ネットワーキング：sendRequestInternalメソッドが段階的に廃止され、現在非推奨になっています。
アニメーション：startOperationBatchとfinishOperationBatchが非推奨になりました。

React Native 0.83 - React 19.2, New DevTools features, no breaking changes

要約

Summary

Key Points

翻訳