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