React Queryは非同期の状態管理ライブラリだ

HRBrain Fly High #4 -Frontend-にて使用した資料

Transcript

1. React Queryは非同期の 状態管理ライブラリだ HRBrain 長期インターン　安井大晟
2. 自己紹介 01. 02. 03. 04. 05. 状態管理の種類 Client State vs Server State 非同期の状態を 管理する キャッシュを 管理する Table of contents
3. 自己紹介 01.
4. 経歴 2019年　早稲田大学教育学部入学 2021年　42Tokyo入学　プログラミングを始める 2022年　技育展優秀賞 2022年　HRBrain長期インターン開始 2023年　春のJavaScript祭りLT登壇 2023年　社内Qiita Engineer Festa運営中
5. 02. 状態管理の種類
6. Reactの状態には 何種類ある？ Redux Context API Recoil jotai useState React Query SWR
7. A. 3種類
8. 株式会社ナレッジワークよしこさんの 記事をお借りします
9. Client State Global State Server State Reactの状態には3種類ある 各Component内で 管理される状態 ページをまたいで 保持し続ける 必要のある状態 サーバーデータ のキャッシュ
10. Client State Global State Server State Reactの状態には3種類ある UIの状態 トースト表示 APIレスポンス
11. Client State Global State Server State Reactの状態には3種類ある UIの状態 トースト表示 APIレスポンス クライアントの状態 サーバーの状態
12. 本来、サーバーの状態は クライアントの状態と 分けて管理されるべきである
13. Client State Global State Server State Reactの状態には3種類ある UIの状態 トースト表示 APIレスポンス クライアントの状態 サーバーの状態
14. Client State Global State Server Stateが存在しない UIの状態 トースト表示 APIレスポンス
15. Redux
16. Client State Global State Server Stateが存在しない UIの状態 トースト表示 APIレスポンス Reduxでは、 Server Stateを Global State として管理している
17. 03. Client State vs Server State
18. Client StateとServer State の違いは？ 以後、Client State = Client State + Global State
19. Client State vs Server State Client State Server State 所有者 クライアントが完全に所有している リモートに操作されうる 同期性 同期的に使用することができる 非同期的に使用する必要がある 最新性 常に最新の状態である 状態が古くなる可能性がある
20. Client State vs Server State Client State Server State 所有者 クライアントが完全に所有している リモートに操作されうる 同期性 同期的に使用することができる 非同期的に使用する必要がある 最新性 常に最新の状態である 状態が古くなる可能性がある
21. 04. 非同期の状態を管 理する
22. ReduxとReact Queryでの 非同期な状態の実装を比較 loadingで検証
23. Reduxの場合
24. React Queryの場合
25. React Queryの場合
26. React Queryは非同期の 状態管理ライブラリだ
27. 05. キャッシュを 管理する
28. Client State vs Server State Client State Server State 所有者 クライアントが完全に所有している リモートに操作されうる 同期性 同期的に使用することができる 非同期的に使用する必要がある 最新性 常に最新の状態である 状態が古くなる可能性がある
29. 状態をなるべく 最新に保ちたい
30. useQueryを使用した データフェッチの流れ 1. useQueryがコンポーネントで呼ばれ、データフェッチを開始 2. queryKeyを参考にキャッシュを確認する - キャッシュヒットした場合、キャッシュされたデータをコンポーネントに返却 - キャッシュヒットしなかった場合、または、キャッシュヒットしたがキャッシュが stale状態の場 合は3に進む 3. バックグラウンドで新しいデータを fetchしてアップデートする 4. 新しいデータをキャッシュに保存して再レンダリングする
31. なるべくキャッシュを 返してfetchを減らしたい
32. StaleTimeとcacheTime • staleTime ◦ キャッシュをstale（古くなったとみなす） 状態にするまでの期間 ◦ デフォルト：0 • cacheTime ◦ キャッシュをガベージコレクション（メモリ領域の開放）するまでの 時間 ◦ デフォルト：5分
33. StaleTimeを使用する • staleTime：0 ◦ 常に最新のデータを取得する • staleTime：Infinity ◦ キャッシュが常にfreshなのでネットワークのリクエストが走らず、 キャッシュからデータを取得する ◦ 自分しか変更できないデータに有効
34. StaleTimeを使用する • staleTime：0 ◦ 基本はこの設定で良い • staleTime：Infinity ◦ データが更新されるタイミングがわかっていれば Infinityにして、更新時に明示的にinvalidateする 最新性を優先する
35. Client State vs Server State Client State Server State 所有者 クライアントが完全に所有している リモートに操作されうる 同期性 同期的に使用することができる 非同期的に使用する必要がある 最新性 常に最新の状態である 状態が古くなる可能性がある
36. Thanks!!!
37. Thanks!!! • Twitter ◦ https://twitter.com/ytaisei_ • Qiita ◦ https://qiita.com/taisei-13046 • Zenn ◦ https://zenn.dev/taisei_13046