DocsDigest
一覧へLanguage: EN
OpenAIReact Native2025/12/10 0:00

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

要点だけを先に読めるように短く再構成したセクションです。

元記事
OpenAIClaude

Quick Digest

要約

要点だけを先に読めるように短く再構成したセクションです。

openaijamodel: gpt-5-mini-2025-08-07

React Native 0.83 リリース — React 19.2、DevTools強化、破壊的変更なし

react-nativereact19devtoolsperformancehermesintersectionobserveriosandroid

Key Points

  • React 19.2 を採用
  • DevTools にネットワーク／パフォーマンス追加
  • ユーザー向け破壊的変更なし

Summary

React Native 0.83 がリリースされました。React 19.2 の導入、React Native DevTools の主要機能追加（ネットワーク検査・パフォーマンス追跡・デスクトップアプリ）、IntersectionObserver の Canary サポート、Web Performance API の安定提供が含まれます。今回のリリースはユーザー向けの破壊的変更がない初のバージョンです。

Key Points

  • React 19.2 を採用（useEffectEvent / Activity 等を含む）。リリース時点で react-native@0.83.0 は react@19.2.0 に依存。React Server Components に関する CVE（CVE-2025-55182）自体は RN に直接影響しないが、モノレポで脆弱なパッケージが混在する場合は直ちに該当パッケージを確認・アップグレードしてください。次のパッチで React 依存を 19.2.1 に更新予定。
  • DevTools 強化：
    • ネットワーク検査（fetch／XMLHttpRequest をキャプチャ、リクエストヘッダ・タイミング・イニシエータ表示）
    • パフォーマンスパネル（JS 実行、React トラック、ネットワーク、User Timings を統合したタイムライン）
    • 新しいバンドル済みデスクトップアプリ（ブラウザ非依存、起動高速化、マルチウィンドウ改善、既知の拡張関連破損回避）
    • Expo では独自の "Expo Network" パネルに差分あり（現時点でイニシエータ未対応、パフォーマンス統合制約あり）。
  • Web Performance API を stable として提供：performance.now(), performance.timeOrigin, PerformanceObserver, getEntries 系, performance.mark/measure, Event Timing, Long Tasks 等。PerformanceObserver は本番ビルドでも動作。
  • IntersectionObserver を Canary として追加（レイアウト交差の非同期観測）。
  • Hermes V1 は実験的オプトイン（ソースからビルドが必要、実験版コンパイラの依存解決とプラットフォーム別有効化が必要）。
  • iOS の実験機能：Legacy Architecture をコンパイルから除外するフラグ（RCT_REMOVE_LEGACY_ARCH）と、プリビルドバイナリのデバッグサポート（シンボルダウンロードと LLDB 利用）。
  • Android の deprecations：Networking の sendRequestInternal、Animation の startOperationBatch / finishOperationBatch が非推奨。

Upgrade notes / Action items

  • 0.82 からのアップグレードは互換性維持が目標で、通常はコード変更不要。
  • モノレポで React Server Components 系パッケージ（react-server-dom-*）を使っている場合：直ちにバージョン確認とアップデートを実施。RN 側は次のパッチで react@19.2.1 に更新予定。
  • Hermes V1 を試す場合はソースビルドと依存解決の上、Android/iOS の実験フラグを設定してください（実運用前提ではない）。

その他

  • 詳細な API・実装ドキュメント、DevTools の使い方、RNTester の例は公式ドキュメント参照を推奨します。

Full Translation

翻訳

原文の流れを保ったまま読める翻訳セクションです。

openaijamodel: gpt-5-mini-2025-08-07

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

React Native 0.83 を公開しました

本日、React Native 0.83 をリリースしました！このリリースには React 19.2、React Native DevTools の主要な新機能、そして Web Performance / Intersection Observer API（Canary）のサポートが含まれます。なお、本リリースはユーザーに影響する破壊的変更が含まれない最初のリリースでもあります。

ハイライト

  • React 19.2
  • DevTools の新機能
  • Intersection Observer（Canary）
  • Web Performance APIs の安定化

React 19.2

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

重要: CVE-2025-55182

リリース時点で、react-native@0.83.0 は react@19.2.0 に依存しています。最近報告された React Server Components に関する重大なセキュリティ脆弱性を目にされた方もいるかもしれません。重要な点は、React Native 自体はこの脆弱性の影響を直接受けないことです。React Native は以下の影響を受けるパッケージに依存していません:

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

ただし、monorepo 内でこれらのパッケージが存在する場合は、直ちに確認してアップグレードしてください。次のパッチリリースで React の依存を 19.2.1 に更新する予定です。

Offscreen

Offscreen を使うと、アプリを「activities」のような単位に分割し、それらを制御・優先付けできます。Offscreen は条件付きレンダリングの代替として使用でき、現時点で次の 2 つのモードをサポートします:

  • hidden：子要素を非表示にし、エフェクトをアンマウントし、React にやるべき作業がなくなるまで更新を遅延させます。
  • visible：子要素を表示し、エフェクトをマウントし、更新を通常どおり処理します。

hidden によって隠されたツリーの興味深い点は、その状態が保持されることです。再び visible に戻したときに、前回のユーザー操作で保持していた検索状態や選択が維持されます。

（Offscreen の詳細は React ドキュメントを参照してください。）

useEffectEvent

useEffect でよくあるパターンは、外部システムからの「イベント」をアプリ側に通知することです。しかし、この方法だと、そのイベント内で使われる任意の値が変わるたびに周囲の useEffect が再実行されてしまいます。多くのユーザーは linter のルールを無効化して依存関係を除外しますが、これは将来的にエフェクトを更新する必要がある場合にバグの原因になります。

useEffectEvent を使うと、イベントを発行するエフェクトから「イベント部分」のロジックを分離できます。詳細は React ドキュメントをご確認ください。

新しい DevTools 機能

0.83 では、長く期待されていた機能や利便性の向上を React Native DevTools に導入しました。

Network と Performance パネル

Network inspection（ネットワーク検査）とパフォーマンストレースは、React Native DevTools における強力な新機能です。

  • Network inspection はすべての React Native アプリで利用可能になり、アプリが行ったネットワークリクエストを確認できます。ログにはタイミングや送受信ヘッダー、レスポンスのプレビューなど詳細なメタデータが含まれます。また、初めて Initiator タブを使ってどのコード箇所からネットワークリクエストが発生したかを確認できます。

ヒント：現在キャプチャされるネットワークイベント

  • 本日、fetch(), XMLHttpRequest のすべてのネットワーク呼び出しを記録しています。Expo Fetch のようなカスタムネットワーキングライブラリ向けのサポートは今後追加予定です。

Expo のネットワーク差分

  • Expo を使っているアプリでは引き続き "Expo Network" パネルが表示されます。これは Expo フレームワーク側の別実装で、追加のリクエストソースをログしますが機能が一部制限されます。
    • Expo 固有のネットワークイベントのカバレッジあり
    • リクエストの initiator（発生箇所）サポートなし
    • Performance パネルとの統合なし

Expo Fetch やサードパーティのネットワーキングライブラリを新しい Network inspection パイプラインに統合するため、Expo チームと協力しています。

  • Performance tracing（パフォーマンスのトレース）を使うと、アプリ内でパフォーマンスセッションを記録し、JavaScript がどのように動作しているか、どの操作が時間を要しているかを把握できます。React Native では JavaScript 実行、React Performance トラック、Network イベント、カスタム User Timings を単一のパフォーマンスタイムラインに表示します。

0.83 での Web Performance APIs サポートと合わせて、アプリの遅さの原因を詳細に可視化できる強力な機能群です。ぜひ Performance パネルを試して日々のワークフローに取り入れてください。

詳細は最新版の React Native DevTools 機能と React Performance トラックのドキュメントを参照してください。

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

従来は DevTools はブラウザウィンドウで起動し、Chrome または Edge のインストールが必要でした。本日、バンドルされたデスクトップアプリによる大幅に改善されたデスクトップ体験を導入します。主な特徴:

  • これまでと同じゼロインストールセットアップ、ただしブラウザ不要
  • 軽量でノータライズされたデスクトップバイナリによる高速起動
  • 企業ファイアウォールなどでダウンロードできない場合は、以前のブラウザ起動フローにフォールバック
  • macOS でのマルチタスク改善、ブレークポイントでの自動前面表示、同じアプリ再接続時の自動前面表示、再起動時のウィンドウ配置の保存
  • 個人のブラウザプロファイルとは別で DevTools を実行することで信頼性を向上
    • 特にプリインストールされた Chrome 拡張が原因で DevTools が壊れるという不具合報告の解消に寄与します

Intersection Observers（Canary）

Web API を React Native に取り込む一環として、0.83 の canary リリースで IntersectionObserver のサポートを追加しました。IntersectionObserver はターゲット要素とその祖先要素とのレイアウト交差を非同期に監視するための API です。詳細は API と実装ドキュメント、および RNTester のサンプルを参照してください。

その他の変更

Web Performance APIs の安定化

0.82 で導入された、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 は Hermes の次の進化版で、コンパイラと VM の改善により JavaScript パフォーマンスが大幅に向上します。React Native 0.82 で実験的なオプトインとして Hermes V1 を導入しましたが、0.83 ではさらにパフォーマンス改善を含みます。

Hermes V1 を有効にする（注意）

注意：Hermes V1 は実験段階のため、試すには React Native をソースからビルドする必要があります。プロジェクトで Hermes V1 を試す手順は次のとおりです。

  • package.json でパッケージマネージャに実験版 Hermes V1 のコンパイラパッケージを解決させます（現行のバージョニングは実験段階用です）：

    yarn / npm

    package.json 内に以下を追加（例）：

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

    または

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

  • Android で Hermes V1 を有効にするには、android/gradle.properties に次を追加します：

    android/gradle.properties

    hermesV1Enabled=true

  • React Native をソースからビルドするように設定するため、android/settings.gradle を編集します（抜粋）：

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

  • iOS で Hermes V1 を有効にするには、環境変数 RCT_HERMES_V1_ENABLED=1 を付けて CocoaPods をインストールします：

    RCT_HERMES_V1_ENABLED=1 bundle exec pod install

注意：Hermes V1 は事前コンパイルされた React Native ビルドと互換性がないため、pod インストール時に RCT_USE_PREBUILT_RNCORE フラグを使わないでください。

Hermes V1 が動作しているか確認するには、アプリまたは DevTools コンソールで次のコードを実行します。返される Hermes バージョンは上記手順で指定したバージョン（250829098.0.1）と一致するはずです。

// expecting "250829098.0.1" in Hermes V1
HermesInternal.getRuntimeProperties()['OSS Release Version'];

実験的 - iOS で Legacy Architecture をコンパイルから除外

本リリースでは、iOS のコードベースから Legacy Architecture をコンパイル時に除外する新しいフラグを追加しました。アプリがすでに New Architecture を利用している場合、次のようにして legacy アーキテクチャコードを削除してみてください：

RCT_REMOVE_LEGACY_ARCH=1 bundle exec pod install

これによりビルド時間とアプリサイズが削減される可能性があります。改善効果は使用しているサードパーティライブラリ数に依存します。弊社のテストでは依存なしの新規アプリでビルド時間が 73.0 秒から 58.2 秒に、アプリサイズが 51.2 Mb から 48.2 Mb に減少しました。

注意：RCT_REMOVE_LEGACY_ARCH は React Native の事前コンパイルバイナリと互換性がありません。事前ビルド済バイナリを使っている場合は、pod を再インストールしてソースからビルドする必要があります。

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

事前コンパイルされた 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 ファイルをダウンロードして適切なフォルダに展開します。これで 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 のコードにステップインしてデバッグできます。

Breaking Changes

React Native のリリースをより予測可能でアップグレードしやすくするために取り組んでいます。React Native 0.83 はユーザー向けの破壊的変更がない最初のリリースです。React Native 0.82 を利用している場合は、アプリコードを変更することなく 0.83 にアップグレードできるはずです。破壊的変更の定義については関連する記事を参照してください。

Deprecated（廃止予定）

本リリースでは Android に関する 2 件の廃止予定 API が含まれます:

  • Networking：sendRequestInternal メソッドが段階的に廃止されます（deprecated）。
  • Animation：startOperationBatch と finishOperationBatch が deprecated になりました。

謝辞

（原文の謝辞セクション）