編集

React Labs が View Transitions、Activity、その他の実験的機能を発表

#React #View Transitions API

React Labs が新しい実験的機能と開発中の機能についての最新情報を公開。View Transitions と Activity の 2 つの実験的機能が試用可能になり、その他の開発中機能の進捗も報告された。

実験バージョンをインストールすることで試すことが出来る。

shell
pnpm add react@experimental react-dom@experimental

出展：React Labs: View Transitions, Activity, and more

#View Transitions によるアニメーション制御

ブラウザの View Transitions API を活用した新しい<ViewTransition>コンポーネントを導入。UI トランジションのアニメーション実装を簡素化する。

主な特徴：

  • <ViewTransition>コンポーネントでアニメーション対象要素をラップ
  • startTransition、useDeferredValue、Suspenseでトリガー可能
  • CSS でアニメーションをカスタマイズ可能
  • 共有要素トランジションのサポート

#Activity による条件付き UI 表示の簡素化

新しい<Activity>コンポーネントを導入。UI の一部を表示・非表示を宣言的に制御できる。

jsx
<Activity when={isOpen}>
  <div>表示・非表示を切り替えるUI</div>
</Activity>

主な特徴：

  • whenプロパティで表示条件を制御
  • 非表示時は DOM から完全に削除
  • トランジションと組み合わせて使用可能
  • コンポーネントのマウント・アンマウントを簡潔に記述

#Effect 依存配列の自動化

React Compiler を使用して Effect 依存配列を自動で挿入する機能を開発中。これにより：

  • 依存配列の手動管理が不要に
  • Effect の理解がより直感的に
  • コンパイラが IDE と連携し、デバッグ時に挿入された依存配列を表示

#その他の開発中機能

  • Fragment Refs：複数の DOM 要素をグループ化して参照可能に
  • Concurrent Stores：外部ストアの並行レンダリングを完全サポート
  • ジェスチャーアニメーション：View Transitions の拡張機能として検討中
編集