React 19でつくる「気持ちいいUI」 — 楽観的更新のすすめ by もりしげ

テーマ

React 19の楽観的更新で、日常のUIをもっと気持ちよく、操作体験を磨くヒントを届けます。
React 19の正式リリースから1年。
主要なライブラリやフレームワークでも対応が進み、今では実際のプロダクト開発でも十分に使える段階に入りました。

本セッションでは、React 19で追加された「新しいレンダリングの考え方」と「フック（useTransition / useOptimistic）」を活用し、「待たせない」「引っかからない」「自然に感じる」UI体験をどう実現できるのかを、実例を交えて紹介します。

非同期処理やサーバー通信が当たり前になった今、「読み込み中」「遅延」「再描画のちらつき」は避けられません。
しかし、React 19のuseTransitionやuseOptimisticを使えば、ユーザーに「遅れ」を感じさせないアプローチを実装できます。

フォーム送信、フィルタリングUI、ボタン操作など日常的なインタラクションを題材に、「技術でUXをなめらかにする」ための発想と実装パターンを一緒に探ります。

想定する参加者層

• Reactでの開発経験があるフロントエンドエンジニア
• React 19や新しいレンダリングの仕組みに興味がある方
• 「UXを良くしたいけど、どこから手をつけていいかわからない」方
• 理論よりも、現場で“手を動かして試したい”タイプの方

（主に初中級者〜中級者の現場エンジニアを想定）

トーク概要

React 19では、useTransitionやuseDeferredValueを使って「急ぎの更新」と「ゆっくりしてもいい更新」を分けることで、UIの引っかかりを減らす仕組みが整いました。
さらにuseOptimisticを組み合わせることで、サーバー応答を待たずにUIを「先に動かす」ことができます。
この「先回りするUI」は、ユーザーに「軽快でスムーズな操作感」を与える鍵になります。
正式リリースから1年が経過した今、これらの機能は既に安定しており、Next.jsやReactRouter（Remix）などの主要フレームワークでも標準的に採用されています。

つまり、「もう試す段階ではなく、使いこなす段階」です。

本トークでは以下の3つのテーマを中心に進めます

1. 「待たせないUI」を実現する考え方とコードパターン
   • useTransitionとuseDeferredValueの具体的な活用例
   • Concurrent Renderingの理解を深める
2. 「楽観的UI」のつくり方
   • useOptimistic + Actionで即時応答を実装
   • 失敗時のロールバック処理のベストプラクティス
3. これからのUX設計の方向性
   • <ViewTransition>で実現するシームレスな画面遷移
   • Reactの進化が示す「体験設計のこれから」

難しい理論を詰め込むよりも、「これなら自分のプロダクトで使えそう」と思える具体例を中心に構成します。
セッション後には、参加者が「自分のUIをもっと気持ちよくできそう！」と感じられることを目指します。