React 19.3公開、View TransitionsとFragment Refsが安定版に

React 19.3が公開されました。Reactチームは2026年9月9日にリリースを公開し、長らく実験的だった二つの機能を安定版に昇格させました。View TransitionsとFragment Refsです。GitHubのリリースノートは52人のコントリビューターを挙げており、View Transitionsだけで47件、Fragment Refsで26件のプルリクエストが背後にあります。

破壊的変更はありません。ここにある機能はどれも、使うかどうかを自分で選ぶものです。

View Transitionsと、実際に発火する条件

新しい<ViewTransition>コンポーネントは、要素が出現、退出、移動、あるいはサイズ変更する際にアニメーションさせます。JavaScriptでアニメーションするのではなく、ブラウザのView Transition APIを通じて行います。

人がつまずくルールは、どの更新がアニメーションするかです。Reactのドキュメントは明確です。「Transitionとしてマークされていない更新は、緊急のものとしてUIに即座に反映されることを意図しているため、アニメーションを引き起こしません」。アニメーションを起こすものは三つあります。startTransition内のstate更新、Suspenseによる表示、useDeferredValueからの更新です。

つまり、コンポーネントを<ViewTransition>で包んでから普通にsetStateを呼んでも、アニメーションはまったく起きません。それは意図された動作であり、バグではありません。何も動かないときに最初に確認すべき点です。

This Week In Reactは、付随するAPIであるaddTransitionTypeに触れています。これを使うと「アニメーションを、それを引き起こすコードから直接カスタマイズ」できます。同じコンポーネントでも、変更の原因によって異なるアニメーションが必要になることが多いため、これは重要です。

プラットフォーム上の制限の一つを、Reactチームは率直に述べています。「現在、<ViewTransition>はDOMでのみ動作します。React Nativeやその他のプラットフォームへの対応に取り組んでいます」。

Fragment Refsはラッパーのdivをなくす

Fragment Refsを使うと、<Fragment>にrefを付け、その中にあるDOMノードの集まりを一つの単位として操作できます。

これが解決する問題はおなじみのものです。複数の兄弟要素へのハンドルが必要なとき、通常はrefを付けるためのラッパーの<div>を追加します。そのラッパーが、周囲のスタイリングやレイアウトに干渉します。GridやFlexの子要素がよくある犠牲者です。

GitHubのリリースノートはこの変更を、「コンポーザブルなプラットフォーム動作をサポートするための<Fragment />へのRef」の追加と説明しています。This Week In Reactはその成果を、「これまで困難だった新しいコンポジションパターン」を解き放つものと位置づけています。実用的な用途は、グループ全体でのイベントリスニングとフォーカス管理です。

小さな変更

変更	内容
独立したTransition	Transitionは「単一のレンダーに絡め取られるのではなく独立してレンダーされるため、遅いTransitionが無関係なTransitionを足止めすることはなくなる」
react-domのbrowser()	「サーバーレンダリング中はエラーになり、ブラウザで解決されるusable」を返し、Suspenseを発生させることでサブツリーをサーバーレンダリングの対象外にする
Trusted Typesのサポート	Trusted Typesを要求するContent-Security-Policyと連携できるようにし、DOMベースのXSSを防ぐ
Server ComponentsでのContext	<Context>を'use client'モジュールから直接レンダーでき、別途プロバイダーのラッパーコンポーネントを用意する必要がない

use(browser())はuseの通常のルールに従います。Reactのドキュメントによれば、「条件文の中や早期returnの後でも呼び出せる」とあり、これは珍しく、そして意図的なものです。

開発者にとっての意味

アニメーションのためではなく、リリース自体の価値でアップグレードしてください。破壊的変更がないため、19.3はごく普通のバージョンアップであり、二つの目玉機能は追加的なものです。

View Transitionsを採用するなら、CSSではなくTransitionのルールに時間を割いてください。初期採用で生じる混乱の大半は、Transitionとしてマークされなかったために静かにアニメーションしない更新から来るでしょう。何かを包む前に、state更新が実際にどこにあるのかを点検してください。

ブラウザ対応の前提も確認してください。これはReact独自の実装ではなくブラウザAPIに依存しているので、下限はユーザーのブラウザが備えているものになります。Chromeが2週間ごとのリリースサイクルに移行した今、その下限は以前より速く動いていますが、アニメーションを保証と見なすことは依然としてできません。アニメーションなしへと劣化する拡張として扱ってください。

Fragment Refsは、静かに効果を発揮する可能性が最も高い変更です。コードベースに、refを持つためだけに存在するラッパーの<div>があるなら、その一つひとつが削除の候補です。それらを取り除けば、レイアウトとは無関係だったレイアウト用の回避策も片付きます。

React Nativeのチームは、今回のリリースの目玉機能から何も得られません。View Transitionsは現時点でDOM専用であり、Reactチームは日程を示さずに他のプラットフォームへの対応を約束しています。