Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React 19時代のコンポーネント設計ベストプラクティス
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
uhyo
February 18, 2026
Technology
3
530
React 19時代のコンポーネント設計ベストプラクティス
2026-02-18 React 19、コンポーネント設計どう変わった?〜うひょさんに聞く最新 実務Tips〜
uhyo
February 18, 2026
Tweet
Share
More Decks by uhyo
See All by uhyo
タグ付きユニオン型を便利に使うテクニックとその注意点
uhyo
2
940
ECMAScript仕様の最新動向: プロセスの変化と仕様のトレンド
uhyo
3
770
TypeScript 6.0で非推奨化されるオプションたち
uhyo
17
7k
Claude Code 10連ガチャ
uhyo
5
1k
AI時代、“平均値”ではいられない
uhyo
8
3.8k
意外と難しいGraphQLのスカラー型
uhyo
5
1k
RSCの時代にReactとフレームワークの境界を探る
uhyo
13
4.8k
知られざるprops命名の慣習 アクション編
uhyo
12
3.4k
libsyncrpcってなに?
uhyo
0
790
Other Decks in Technology
See All in Technology
Oracle Cloud Observability and Management Platform - OCI 運用監視サービス概要 -
oracle4engineer
PRO
2
14k
私たち準委任PdEは2つのプロダクトに挑戦する ~ソフトウェア、開発支援という”二重”のプロダクトエンジニアリングの実践~ / 20260212 Naoki Takahashi
shift_evolve
PRO
2
310
チーム開発の基礎_研究を事業につなげるために
cyberagentdevelopers
PRO
0
370
SchooでVue.js/Nuxtを技術選定している理由
yamanoku
3
1.4k
猫でもわかるKiro CLI(セキュリティ編)
kentapapa
1
210
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
1
1k
30分でわかる「ネットワーク図の描き方入門」/infraengbooks56
corestate55
0
300
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
torounit
0
220
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
15
93k
pool.ntp.orgに ⾃宅サーバーで 参加してみたら...
tanyorg
1
2.7k
#23 Turing × atmaCup 2nd 6th Place Solution + 取り組み方紹介
yumizu
0
130
コンテナセキュリティの最新事情 ~ 2026年版 ~
kyohmizu
8
2.9k
Featured
See All Featured
How Software Deployment tools have changed in the past 20 years
geshan
0
32k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
260
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
930
Speed Design
sergeychernyshev
33
1.5k
SEO for Brand Visibility & Recognition
aleyda
0
4.3k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
2.2k
Building Flexible Design Systems
yeseniaperezcruz
330
40k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
76
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
88
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
Mind Mapping
helmedeiros
PRO
1
94
Transcript
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