React Labs: What We've Been Working On – June 2022

Summary

Reactチームが進めている研究/実験的プロジェクトの現状共有です。これはロードマップや確定したリリース予定ではなく、設計の方向性や得られた知見をエンジニア向けに短くまとめたものです。多くは実験段階であり、最終仕様は変更され得ます。

Key Points

• 全体方針: 様々な実験的プロジェクトを公開し、エコシステム全体で一貫したセマンティクスを目指す。タイムラインは未確定。
• Server Components (RSC): フォークした I/O ライブラリ戦略をやめ、async/await ベースへ移行。ファイル拡張子ではなく境界注釈へ変更検討中。Vercel/Shopify と協業し bundler 間の共通セマンティクスを整備中で、これが安定化の主要な阻害要因。
• Asset Loading: スクリプト・CSS・フォント・画像を React API でプレロード/重複排除し、Suspense と統合してストリーミングや同時レンダリングを阻害せずに表示ブロックを制御する検討。
• Static/SSR 最適化: SSG/ISR に加え、動的 SSR に対してコンパイルや静的パスを使った部分的キャッシュ最適化を探索中。
• React Optimizing Compiler (旧 React Forget): コンパイラを全面書き直し、useMemo/useCallback 相当の最適化を自動生成。ローカルミューテーションなど複雑なパターンの解析とメモ化が可能に。プレイグラウンドで出力を対話的に確認できる予定。
• Offscreen: マウント解除でも CSS だけの非表示でもない第三の選択肢。UI を視覚的に隠しつつレンダリング優先度を下げ、アイドル時に差分レンダリングすることで状態保持とパフォーマンスを両立。プリレンダ／ルート切替での状態保持／仮想リスト／バックグラウンドコンテンツに有効。
• Transition Tracing: 既存の Interaction Tracing の設計問題を解消する新仕様（仮称）。startTransition 起点で特定のユーザー操作や遷移を追跡し、原因となる更新を特定しやすくするツールチェインの提供を目指す。
• ドキュメントと教育: 新しい docs サイト（react.dev）を継続改善中。effects セクションを強化中で、useEvent RFC は研究段階。

Practical notes for engineers

• 多くは実験的で仕様が変わるため、実装を前提にした依存は慎重に。
• RSC の安定化はバンドラサポートとセマンティクス統一が鍵。ツール側の対応をウォッチすること。
• Offscreen や Asset Loading の新 API はパフォーマンス設計に直接影響するため、ベンチや移行戦略を早めに検討すること。
• コンパイラとトレース機能はリグレッション検出とレンダリングコスト削減に直結するため、リリース後は検証を推奨。