Reactの重要な変化2つ: View TransitionsとActivity

• Reactが新しい実験的機能を公開
  • View Transitionsは滑らかなページ遷移アニメーションを簡単に適用できるようにする
  • ActivityはUIを隠して状態を保持しながら、パフォーマンス最適化を可能にする
• このほかにも自動依存関係処理、Fragment Refs、Concurrent Storesなど、さまざまな機能の開発が進行中

View Transitionsの主な特徴

• 新たに導入されたstartViewTransitionブラウザAPIを活用してアニメーションを実装
• <ViewTransition>でどの要素をアニメーションさせるかを明示し、startTransition、useDeferredValue、Suspenseなどをトリガーとして使用できる
• デフォルトでクロスフェードアニメーションを提供し、CSSでカスタマイズ可能
• **共有要素遷移(shared element transitions)**にも対応し、同じname属性を持つ要素同士で自然な移動が可能
• 遷移の原因(cause)に応じてアニメーションを変えられるaddTransitionType APIを提供

Activityの主な特徴

• <Activity>を通じてUIを隠して状態を維持したり、必要に応じてプリレンダリングしたりできる
• 非表示モードではコンポーネントがアンマウントされるが状態は保持され、レンダー優先度が低くなる
• ページ移動時に入力値や状態を失わずに復元できる
• 今後はモーダル向けモードや、メモリ節約のための状態削除機能も追加される予定
• サーバーサイドレンダリング(SSR)でもActivityが最適化動作をサポート

そのほか開発中の機能

• React Performance Tracks

  • ブラウザのパフォーマンスプロファイラにReact専用のカスタムトラックを追加する機能を開発中
  • まだパフォーマンスおよびSuspenseとの連携に関する問題を解決中

• 自動Effect依存関係処理 (Automatic Effect Dependencies)

  • React Compilerを通じてuseEffect依存関係を自動挿入し、コードの簡潔さと理解しやすさを高めることが目標
  • コンポーネントのライフサイクルではなく、Effect中心の考え方を促したい考え

• Compiler IDE Extension

  • React CompilerをベースにしたIDE拡張機能を開発中
  • コード最適化、ルール違反の検出、自動挿入された依存関係の表示など、さまざまな機能を提供予定

• Fragment Refs

  • 複数のDOM要素を1つのRefで管理できるようにするFragment Ref機能を研究中
  • DOM API呼び出しをより簡単にすることが目的

• Gesture Animations

  • View Transitionをタッチジェスチャーベースのアニメーションにも拡張する研究を進行中
  • 連続的な動き、完了していない動作の処理、新しいDOMと既存DOMの反転処理などの問題を解決中

• Concurrent Stores

  • 外部ストアをReactと**並行(Concurrent)**方式で自然に統合することが目標
  • useSyncExternalStoreの限界を超え、新しいuse(store)スタイルのAPIを開発中