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

2026-02-18 React 19、コンポーネント設計どう変わった？〜うひょさんに聞く最新 実務Tips〜

1. React 19時代のコンポーネント 設計ベストプラクティス 2026-02-18 React 19、コンポーネント設計どう変わった？〜うひょさんに聞く最新 実務Tips〜
2. 発表者紹介 uhyo 株式会社カオナビ フロントエンドエキスパート 最近はReact向けのOSSを 開発するのが趣味。 2
3. 本日のテーマ React 19がリリースされてもう1年以上。 現在のReactベストプラクティスは何なのか？ 最新のReact事情はどうなっているのか？ できる限りお伝えします。 3
4. 導入 — なぜReactを使うのか
5. なぜReactを使うのか •フロントエンドのデファクトだから？ •得意だから？ •宣言的UIだから？ 5
6. なぜReactを使うのか どんなライブラリでも、使うにあたって 明確な目的意識があるのが望ましい。 ひとつは、宣言的UI。 6
7. なぜReactを使うのか でも、宣言的UIライブラリも色々ある。 7
8. なぜReactを使うのか Reactに顕著な特徴は、 より良いUXのための、 高度に最適化されたスケジューリングにある。 （実DOM直結ではなく仮想DOMなのも、単なる歴史的経緯では なくそれを活かした機構になっている） 8
9. Async Reactとは
10. Async Reactとは React Conf 2025で、React開発メンバーによって Async Reactという講演が行われた。 10 ↓おすすめ記事紹介 https://www.youtube.com/watch?v=B_2E96URooA
11. Async Reactとは 非同期処理があることを前提にアプリケーション を実装し、最適なUXを目指す考え方。 React 19にはすでに、Async ReactのためのAPIが いくつも存在している。 11
12. 例 ボタンを押したら、API呼び出しが返ってくる まで画面が変化しない…… useOptimisticによる楽観的更新でUX向上！ 12
13. 例 ページネーションで、次のページに移動したときに Suspenseフォールバックが一瞬見えてしまう…… トランジションで読み込み中の表示を改善して ちらつきを防止！ 13
14. 例 画面が切り替わったときに色々な要素が移動して、 何がどう変わったのか分かりにくい…… ViewTransitionで適切なアニメーションを入れる ことで分かりやすさを向上！ （まだ安定版には含まれていません） 14
15. Async Reactの現状 このように、Async Resultの考え方を取り入れた 優れたUXを実現するためのAPIはすでに結構ある。 ReactチームはAsync Reactワーキンググループ を立ち上げ、Async Resultの普及を目指す。 15
16. Async Reactの普及 ①エコシステムのライブラリにAsync React対応 を組み込む 自慢: 自作ルーティングライブラリ FUNSTACK Routerにはトランジション を組み込みAsync React対応しました！ 16
17. Async Reactの普及 ② Async Reactの概念の教育・普及を促進する 今やってるこのトークも、Async Reactの普及に 貢献したいという意図を込めてやっています。 17
18. 要するに…… 18
19. React 19時代のベストプラクティス Async Reactの考え方を取り入れること がベストプラクティスである といっても過言ではない。 19
20. React 19時代のベストプラクティス Async React用のAPIをただ使うだけではない。 汎用化し、個別の対応をせずとも 最適化されたUXを提供できること がゴールとなる。 20
21. 具体例 21
22. 最初の一歩: 全てをトランジションにする React 18でトランジション（useTransition）が 導入されたときから、 一部の例外を除き、全てのステート更新は トランジションであることが望ましい というのがReactチームの考えである。 22
23. 最初の一歩: 全てをトランジションにする // 普通のステート更新はトランジションではない setFoo(123); // オプトインしてトランジションにする startTransition(() => { setFoo(123); }); 23
24. トランジションの汎用化 しかし、全てのステート更新にstartTransitionを 付けて回るのは面倒くさい。汎用化すべき。 方法としては…… ①ステート管理ライブラリに組み込む ②汎用コンポーネントに組み込む ←今日はこれを紹介 24
25. 汎用ボタンコンポーネント 従来のコンポーネント: const MyButton: FC<ButtonProps> = ({ onClick, children }) => <button className=“…” onClick={onClick}> {children} </button>; 25
26. 汎用ボタンコンポーネント トランジション組み込み済のコンポーネント: const MyButton: FC<ButtonProps> = ({ action, children }) => <button className=“…” onClick={(event) => { startTransition(() => { action(event); }); }}> {children} </button>; 26
27. 汎用ボタンコンポーネント 汎用ボタンコンポーネントにトランジションを 組み込むことで、そのボタンを介するステート 更新は自動的にトランジションになる。 これがAsync Result流！ 27
28. 汎用ボタンコンポーネント isPendingを使うのもおしゃれ。コンポーネントの責務を しっかり切りつつアプリ全体と調和するUXになる。 const [isPending, startTransition] = useTransition(); return (<button className={…} onClick={(event) => { startTransition(() => { action(event); }); }}> {children} </button>); 28
29. どのように設計すべきか 29
30. Suspenseはもはや前提条件 Async Reactという以上、非同期処理を Reactランタイムが知らないといけない。 そのための基礎であるSuspenseは、 もはや全ての前提であり必須。 30
31. Suspenseはもはや前提条件 SuspenseはSuspenseバウンダリを作る。 つまり、Suspenseの中と外を区切る役目を持つ。 アプリケーション内にどのようにSuspenseを配置し、 境界を引くのか考えることがアプリケーション設計に おいて重要。 31
32. Suspenseはオプトアウトの手段でもある トランジションのデフォルトの挙動をオプトアウト することも、 Suspenseバウンダリの配置の仕方によって可能と なる。 これに詳しく載っています（宣伝）→ 32
33. トランジションを意味づける useOptimisticやuseActionStateといったAPIを 使いこなすためには、トランジションの設計が重要。 「このトランジションは何を意味していて、いつから いつまで続くのか」を設計する。 33
34. つまり……宣言的UI Async Reactの理想は、トランジションの「意味」を プログラマーが考えて、具体的な挙動はReactが よしなにやってくれること。 これって、宣言的UIでは？ 34
35. まとめ 35
36. まとめ Reactは宣言的UIのライブラリだから、 宣言的UIの考え方で使いましょう。 Async Reactにより、従来よりも広い範囲で 宣言的UIの考え方を適用できるようになった。 React本体と、エコシステムが向いている方向 に合わせていきたい。 36