React Labs: What We've Been Working On – February 2024

Summary

React Labsの2024年2月アップデートでは、主要な実装成果としてReact Compilerの本番導入、クライアント／サーバ間のデータ送信を簡素化するActions機能の公開（Canary）、およびDocument Metadata／Asset Loadingなどの新機能が報告されています。これらはReact Canaryで利用可能で、今後のメジャーリリース（React 19）で安定化する予定です。

Key Points

• React Compiler

  • React Compilerは研究段階を抜け、instagram.comで本番運用中。コードの自動最適化で手動メモ化の負担を減らす狙い。
  • コンパイラはReactの不変性ルール等をモデル化して安全に最適化。Strict ModeとESLintプラグインで準拠性を確認することを推奨。

• Actions（フォーム／データ送信API）

  • actionプロップで<form>等に関数を渡せる。サーバ／クライアント両側で定義可能（"use server"や通常のJS）。
  • useFormStatus、useActionStateでライフサイクル／結果を取得。useOptimisticで楽観更新を扱える。
  • ActionsはCanaryチャンネルで利用可能。ライブラリ作者はuseTransitionを使ったaction互換APIを検討すること。

• React CanaryとReact 19準備

  • Server Components、Asset Loading、Document Metadata、ActionsなどがCanaryに追加され、ドキュメントがreact.devに公開。
  • Asset LoadingやDocument Metadata、Web Components対応などは互換性に影響するため、次はメジャーアップデート（React 19）としてリリース予定。

• その他

  • Offscreenは「Activity」に改名（研究継続）。
  • 開発者向けリソース：過去のトークやドキュメント、ESLintプラグインの更新を参照して互換性対応を進める。

Practical guidance for engineers

• まずCanaryで新機能を試し、既存コードの互換性を評価する。
• Strict ModeとReactのESLintプラグインを有効化して、コンパイラや新APIへの準拠性を高める。
• Actionsを導入する場合はuseFormStatus / useActionState / useOptimisticでUIを管理し、ライブラリはactionプロップ互換を提供する設計を検討する。
• React 19へ移行する際は、Asset Loading／Document Metadata／Web Componentsの影響範囲を事前に洗い出す。

さらに詳しい導入手順や互換性チェックリストはreact.devの該当ドキュメントとCanaryリリースノートを参照してください。