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
React19で状態管理はどう変わるか
Search
ytaisei
August 03, 2024
Technology
2
130
React19で状態管理はどう変わるか
若手エンジニアLT & 交流会にて使用したスライドです
https://devguil.connpass.com/event/321787/
ytaisei
August 03, 2024
Tweet
Share
More Decks by ytaisei
See All by ytaisei
Reactを段階的に覗いてみる
ytaisei
2
1.2k
Reactのトランジションを覗いてみる
ytaisei
1
1.6k
Deep Dive Into React 〜React Fiber Architectureについて〜
ytaisei
1
120
TanStackで効率的なルーティングとデータ取得を実現
ytaisei
9
1.6k
TanStack Routerで型安全かつ効率的なルーティングを実現
ytaisei
4
1.7k
BunがCommonJSをサポートする理由
ytaisei
2
320
TanStack Router SPA開発の選択肢になるか(+TanStack Query)
ytaisei
2
1.4k
【2023】SWR vs TanStack Query
ytaisei
1
2k
React Queryは非同期の状態管理ライブラリだ
ytaisei
3
1.9k
Other Decks in Technology
See All in Technology
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
6
5.6k
品質文化を支える小さいクロスファンクショナルなチーム / Cross-functional teams fostering quality culture
toma_sm
0
100
SREの視点で考えるSIEM活用術 〜AWS環境でのセキュリティ強化〜
coconala_engineer
1
290
Running JavaScript within Ruby
hmsk
3
330
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
От ручной разметки к LLM: как мы создавали облако тегов в Lamoda. Анастасия Ангелова, Data Scientist, Lamoda Tech
lamodatech
0
710
AI Agentを「期待通り」に動かすために:設計アプローチの模索と現在地
kworkdev
PRO
2
450
プロダクト開発におけるAI時代の開発生産性
shnjtk
2
240
Amazon CloudWatch Application Signals ではじめるバーンレートアラーム / Burn rate alarm with Amazon CloudWatch Application Signals
ymotongpoo
5
500
IVRyにおけるNLP活用と NLP2025の関連論文紹介
keisukeosone
0
200
Cursor AgentによるパーソナルAIアシスタント育成入門―業務のプロンプト化・MCPの活用
os1ma
13
4.7k
いつも初心者向けの記事に助けられているので得意分野では初心者向けの記事を書きます
toru_kubota
2
310
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Thoughts on Productivity
jonyablonski
69
4.6k
GitHub's CSS Performance
jonrohan
1030
460k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Scaling GitHub
holman
459
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
Gamification - CAS2011
davidbonilla
81
5.2k
KATA
mclloyd
29
14k
How to Ace a Technical Interview
jacobian
276
23k
Transcript
React19で状態管理はどう変わるか 株式会社AI Shift 安井大晟(ytaisei_)
自己紹介 • 株式会社AI Shift ◦ Webフロントエンド ◦ LLMを活用した新規事業 • 社会人1年目
• 2社でBtoBアプリケーション開発 • Zennで記事をよく書いてる、など
アジェンダ 1. use API 2. useActionState Hook 3. useOptimistic Hook
4. まとめ
アジェンダ 1. use API 2. useActionState Hook 3. useOptimistic Hook
4. まとめ 重要:今回はクライアントでの実行にFocusしています。
use API > use はプロミス (Promise) やコンテクストなどのリソースから 値を読み取るための React API
です。 > プロミスを引数にして呼び出した場合、 use API は Suspense や エラーバウンダリ (error boundary) と協調して動作します。 参考:https://ja.react.dev/reference/react/use
use API > use はプロミス (Promise) やコンテクストなどのリソースから 値を読み取るための React API
です。 > プロミスを引数にして呼び出した場合、 use API は Suspense や エラーバウンダリ (error boundary) と協調して動作します。 参考:https://ja.react.dev/reference/react/use おっ?
ReactのAPIでSuspense for Data Fetchingが可能??? (今までは) TanStack QueryやSWRなどのライブラリを 使用しないと実現できなかった (期待) Reactの標準APIで
Suspense for Data Fetchingを実装したい...
ReactのAPIでSuspense for Data Fetchingが可能??? (今までは) TanStack QueryやSWRなどのライブラリを 使用しないと実現できなかった (期待) Reactの標準APIで
Suspense for Data Fetchingを実装したい... 非推奨 😢
Promiseのキャッシュが必要 何も工夫をしないとレンダリングのたびに Promiseが再生成されてしまう 不必要に非同期処理が走る 自前でキャッシュを用意する...?
非同期の状態管理ライブラリは Promiseのキャッシュと その制御という観点で未だ重要な役割を持つ
コンテクストから値を読み取る • use APIにコンテキストを渡すと useContextと同じ挙動になる • useContextとの違い ◦ 条件分岐の中で使用できる
コンテクストから値を読み取る • use APIにコンテキストを渡すと useContextと同じ挙動になる • useContextとの違い ◦ 条件分岐の中で使用できる use
はより柔軟であるため、 useContext よりも優先的に使用する 参考:https://ja.react.dev/reference/react/use#reading-context-with-use
useActionState Hook 状態の更新に伴う要素 • 更新する状態 • 更新中の状態 • 更新結果の状態 Stateで実装するのはしんどい...
→ Formライブラリを採用する動機になる (React19以前のコード)
useActionState Hook 状態の更新に伴う要素 • 更新する状態 ◦ formの拡張(FormData) • 更新中の状態 ◦
isPending • 更新結果の状態 ◦ Success or Error State これらがReactのHooksで完結する
useActionStateとformの拡張によって、 状態の更新を効率的に管理できるようになった。 • バンドルサイズの軽減 • 学習コストの低下 • ライブラリのメンテナンス これらの観点からも Reactで状態の更新が完結するのはメリットがある。
useOptimistic Hook 個人的に最も期待している Hookです
useOptimistic Hook 楽観的更新とは? 非同期リクエストの進行中、最終的に得るはずの状 態を先に楽観的に表示しておくというもの
これまでの楽観的更新 React19以前(TanStack Queryの例) TanStack Queryでの処理 1. 実行中のクエリをキャンセル 2. 更新前のスナップショットを記憶 3.
キャッシュを直接更新&描画 4. 非同期で更新処理を実行 5. 成功した場合はinvalidateQueriesで データを再取得 6. エラーの場合は表示中の状態を Fallback
これまでの楽観的更新 やりたいことの割に処理が複雑 ... • ライブラリ固有の知識が必要 ◦ キャッシュの扱い ◦ Callback関数の実行順序 etc.
• ライブラリによって若干実装が変わる useOptimisticが解決
useOptimisticによる楽観的更新 useOptimisticでの処理 1. useOptimisticに初期値を渡す 2. useOptimisticから返される dispatch関数を更新処理の前に実行 a. stateが更新&描画 3.
非同期処理が成功・失敗に合わせて処 理を追加
ライブラリ固有の学習無しに楽観的更新を実装可能になった
まとめ • useはコンテキストからのリソース取得が柔軟 • useActionStateとuseOptimisticによって 今までライブラリに頼っていた実装が React固有のAPI・Hooksによって実現できる ◦ まずはReactの機能で実装を試みて、 足りない要素を補うようにより薄くライブラリを使っていく意識