Let's check React 19.3

Transcript

1. Let’s check React 19.3 2026/09/11 locol@React Tokyo #20
2. About me - Name: locol Role: React Tokyo Staff X: @locol23 Bluesky: locol23.bsky.social Favorite: React, Anime, Dramas
3. <ViewTransition> - ブラウザ標準の ViewTransition API を React に統合したコンポーネント - startTransition や useDeferredValue と組み合わせて使用する
4. <ViewTransition> - DOMツリーの変更内容により、アニメーションタイプは 4 種類 - - enter: コンポーネントがツリーに追加されたとき exit: コンポーネントがツリーから削除されたとき update: スタイルや中身が変更されたとき share: 名前付きの ViewTransition が別の場所に移動したとき Suspense のフォールバックもサポート
5. Fragment Refs - <Fragment ref="{...}"> 今まではラッパーとして <div> などを使用する必要があったが、 ref prop を Fragment に直接渡せるようになった - ユースケース - レイアウト崩れを防ぐため余計なラッパー <div> を入れたくないケース - 外部ライブラリ等のコンポーネントが ref を転送（forwardRef）してくれないケース
6. browser API - - localStorage や端末のローカルタイムゾーンなど、 ブラウザ環境でしか意味をなさない値を参照するコンポーネントを サーバーレンダリングから安全に除外できるAPI 今までの課題を解決するために実装された - useEffect + useState によるチラつき ハイドレーションエラー
7. browser API
8. browser API サーバー側ではここで Suspend され、 Suspense の fallback が出力される
9. browser API クライアント側では Suspend されないの で、後続の処理が実行され、クライアントの タイムゾーンが取得できる
10. Conclusion - <ViewTransition> が入ったことによって View Transition API が React ネイティブで使用できるようになった Fragment Refs はみんな待っていた - - 余計なラッパー div とお別れできる react-dom の browser() のお陰で useEffect を使用した実装を しなくてよくなった - ハイドレーションエラー対策や mounted フラグ管理のためだけに書いていた useEffect を 減らせる
11. Thank you!