React 19時代のコンポーネント設計ベストプラクティス

React 19時代のコンポーネント設計ベストプラクティス 2026-02-18 React 19、コンポーネント設計どう変わった？〜うひょさんに聞く最新実務Tips〜

発表者紹介 uhyo 株式会社カオナビフロントエンドエキスパート最近はReact向けのOSSを開発するのが趣味。 2

本日のテーマ React 19がリリースされてもう1年以上。現在のReactベストプラクティスは何なのか？最新のReact事情はどうなっているのか？できる限りお伝えします。 3

導入 — なぜReactを使うのか

なぜReactを使うのか •フロントエンドのデファクトだから？ •得意だから？ •宣言的UIだから？ 5

なぜReactを使うのかどんなライブラリでも、使うにあたって明確な目的意識があるのが望ましい。ひとつは、宣言的UI。 6

なぜReactを使うのかでも、宣言的UIライブラリも色々ある。 7

なぜReactを使うのか Reactに顕著な特徴は、より良いUXのための、高度に最適化されたスケジューリングにある。（実DOM直結ではなく仮想DOMなのも、単なる歴史的経緯ではなくそれを活かした機構になっている） 8

Async Reactとは

Async Reactとは React Conf 2025で、React開発メンバーによって Async Reactという講演が行われた。 10 ↓おすすめ記事紹介 https://www.youtube.com/watch?v=B_2E96URooA

Async Reactとは非同期処理があることを前提にアプリケーションを実装し、最適なUXを目指す考え方。 React 19にはすでに、Async ReactのためのAPIがいくつも存在している。 11

例ボタンを押したら、API呼び出しが返ってくるまで画面が変化しない…… useOptimisticによる楽観的更新でUX向上！ 12

例ページネーションで、次のページに移動したときに Suspenseフォールバックが一瞬見えてしまう…… トランジションで読み込み中の表示を改善してちらつきを防止！ 13

例画面が切り替わったときに色々な要素が移動して、何がどう変わったのか分かりにくい…… ViewTransitionで適切なアニメーションを入れることで分かりやすさを向上！（まだ安定版には含まれていません） 14

Async Reactの現状このように、Async Resultの考え方を取り入れた優れたUXを実現するためのAPIはすでに結構ある。 ReactチームはAsync Reactワーキンググループを立ち上げ、Async Resultの普及を目指す。 15

Async Reactの普及 ①エコシステムのライブラリにAsync React対応を組み込む自慢: 自作ルーティングライブラリ FUNSTACK Routerにはトランジションを組み込みAsync
React対応しました！ 16

Async Reactの普及 ② Async Reactの概念の教育・普及を促進する今やってるこのトークも、Async Reactの普及に貢献したいという意図を込めてやっています。 17

要するに…… 18

React 19時代のベストプラクティス Async Reactの考え方を取り入れることがベストプラクティスであるといっても過言ではない。 19

React 19時代のベストプラクティス Async React用のAPIをただ使うだけではない。汎用化し、個別の対応をせずとも最適化されたUXを提供できることがゴールとなる。 20

具体例 21

最初の一歩: 全てをトランジションにする React 18でトランジション（useTransition）が導入されたときから、一部の例外を除き、全てのステート更新はトランジションであることが望ましいというのがReactチームの考えである。 22

最初の一歩: 全てをトランジションにする // 普通のステート更新はトランジションではない setFoo(123); // オプトインしてトランジションにする startTransition(() => {
setFoo(123); }); 23

トランジションの汎用化しかし、全てのステート更新にstartTransitionを付けて回るのは面倒くさい。汎用化すべき。方法としては…… ①ステート管理ライブラリに組み込む ②汎用コンポーネントに組み込む ←今日はこれを紹介 24

汎用ボタンコンポーネント従来のコンポーネント: const MyButton: FC<ButtonProps> = ({ onClick, children })
=> <button className=“…” onClick={onClick}> {children} </button>; 25

汎用ボタンコンポーネントトランジション組み込み済のコンポーネント: const MyButton: FC<ButtonProps> = ({ action, children })
=> <button className=“…” onClick={(event) => { startTransition(() => { action(event); }); }}> {children} </button>; 26

汎用ボタンコンポーネント汎用ボタンコンポーネントにトランジションを組み込むことで、そのボタンを介するステート更新は自動的にトランジションになる。これがAsync Result流！ 27

汎用ボタンコンポーネント isPendingを使うのもおしゃれ。コンポーネントの責務をしっかり切りつつアプリ全体と調和するUXになる。 const [isPending, startTransition] = useTransition(); return (<button
className={…} onClick={(event) => { startTransition(() => { action(event); }); }}> {children} </button>); 28

どのように設計すべきか 29

Suspenseはもはや前提条件 Async Reactという以上、非同期処理を Reactランタイムが知らないといけない。そのための基礎であるSuspenseは、もはや全ての前提であり必須。 30

Suspenseはもはや前提条件 SuspenseはSuspenseバウンダリを作る。つまり、Suspenseの中と外を区切る役目を持つ。アプリケーション内にどのようにSuspenseを配置し、境界を引くのか考えることがアプリケーション設計において重要。 31

Suspenseはオプトアウトの手段でもあるトランジションのデフォルトの挙動をオプトアウトすることも、 Suspenseバウンダリの配置の仕方によって可能となる。これに詳しく載っています（宣伝）→ 32

トランジションを意味づける useOptimisticやuseActionStateといったAPIを使いこなすためには、トランジションの設計が重要。「このトランジションは何を意味していて、いつからいつまで続くのか」を設計する。 33

つまり……宣言的UI Async Reactの理想は、トランジションの「意味」をプログラマーが考えて、具体的な挙動はReactがよしなにやってくれること。これって、宣言的UIでは？ 34

まとめ 35

まとめ Reactは宣言的UIのライブラリだから、宣言的UIの考え方で使いましょう。 Async Reactにより、従来よりも広い範囲で宣言的UIの考え方を適用できるようになった。 React本体と、エコシステムが向いている方向に合わせていきたい。 36

React 19時代のコンポーネント設計ベストプラクティス

React 19時代のコンポーネント設計ベストプラクティス

uhyo

More Decks by uhyo

Other Decks in Technology

Featured

Transcript