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

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

Transcript

1. React Queryは非同期の
   状態管理ライブラリだ
   HRBrain 長期インターン　安井大晟
   

   View Slide

2. 自己紹介
   01. 02. 03.
   04. 05.
   状態管理の種類 Client State
   vs
   Server State
   非同期の状態を
   管理する
   キャッシュを
   管理する
   Table of contents
   

   View Slide

3. 自己紹介
   01.
   

   View Slide

4. 経歴
   2019年　早稲田大学教育学部入学
   2021年　42Tokyo入学　プログラミングを始める
   2022年　技育展優秀賞
   2022年　HRBrain長期インターン開始
   2023年　春のJavaScript祭りLT登壇
   2023年　社内Qiita Engineer Festa運営中
   

   View Slide

5. 02.
   状態管理の種類
   

   View Slide

6. Reactの状態には
   何種類ある？
   Redux
   Context API
   Recoil
   jotai
   useState React Query
   SWR
   

   View Slide

7. A.
   3種類
   

   View Slide

8. 株式会社ナレッジワークよしこさんの
   記事をお借りします
   

   View Slide

9. Client State Global State Server State
   Reactの状態には3種類ある
   各Component内で
   管理される状態
   ページをまたいで
   保持し続ける
   必要のある状態
   サーバーデータ
   のキャッシュ
   

   View Slide

10. Client State Global State Server State
    Reactの状態には3種類ある
    UIの状態 トースト表示 APIレスポンス
    

    View Slide

11. Client State Global State Server State
    Reactの状態には3種類ある
    UIの状態 トースト表示 APIレスポンス
    クライアントの状態 サーバーの状態
    

    View Slide

12. 本来、サーバーの状態は
    クライアントの状態と
    分けて管理されるべきである
    

    View Slide

13. Client State Global State Server State
    Reactの状態には3種類ある
    UIの状態 トースト表示 APIレスポンス
    クライアントの状態 サーバーの状態
    

    View Slide

14. Client State Global State
    Server Stateが存在しない
    UIの状態 トースト表示
    APIレスポンス
    

    View Slide

15. Redux
    

    View Slide

16. Client State Global State
    Server Stateが存在しない
    UIの状態 トースト表示
    APIレスポンス
    Reduxでは、
    Server Stateを
    Global State
    として管理している
    

    View Slide

17. 03.
    Client State
    vs Server State
    

    View Slide

18. Client StateとServer State
    の違いは？
    以後、Client State = Client State + Global State
    

    View Slide

19. Client State vs Server State
    Client State Server State
    所有者 クライアントが完全に所有している リモートに操作されうる
    同期性 同期的に使用することができる 非同期的に使用する必要がある
    最新性 常に最新の状態である 状態が古くなる可能性がある
    

    View Slide

20. Client State vs Server State
    Client State Server State
    所有者 クライアントが完全に所有している リモートに操作されうる
    同期性 同期的に使用することができる 非同期的に使用する必要がある
    最新性 常に最新の状態である 状態が古くなる可能性がある
    

    View Slide

21. 04.
    非同期の状態を管
    理する
    

    View Slide

22. ReduxとReact Queryでの
    非同期な状態の実装を比較
    loadingで検証
    

    View Slide

23. Reduxの場合
    

    View Slide

24. React Queryの場合
    

    View Slide

25. React Queryの場合
    

    View Slide

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

    View Slide

27. 05.
    キャッシュを
    管理する
    

    View Slide

28. Client State vs Server State
    Client State Server State
    所有者 クライアントが完全に所有している リモートに操作されうる
    同期性 同期的に使用することができる 非同期的に使用する必要がある
    最新性 常に最新の状態である 状態が古くなる可能性がある
    

    View Slide

29. 状態をなるべく
    最新に保ちたい
    

    View Slide

30. useQueryを使用した
    データフェッチの流れ
    1. useQueryがコンポーネントで呼ばれ、データフェッチを開始
    2. queryKeyを参考にキャッシュを確認する
    - キャッシュヒットした場合、キャッシュされたデータをコンポーネントに返却
    - キャッシュヒットしなかった場合、または、キャッシュヒットしたがキャッシュが
    stale状態の場
    合は3に進む
    3. バックグラウンドで新しいデータを
    fetchしてアップデートする
    4. 新しいデータをキャッシュに保存して再レンダリングする
    

    View Slide

31. なるべくキャッシュを
    返してfetchを減らしたい
    

    View Slide

32. StaleTimeとcacheTime
    ● staleTime
    ○ キャッシュをstale（古くなったとみなす）
    状態にするまでの期間
    ○ デフォルト：0
    ● cacheTime
    ○ キャッシュをガベージコレクション（メモリ領域の開放）するまでの
    時間
    ○ デフォルト：5分
    

    View Slide

33. StaleTimeを使用する
    ● staleTime：0
    ○ 常に最新のデータを取得する
    ● staleTime：Infinity
    ○ キャッシュが常にfreshなのでネットワークのリクエストが走らず、
    キャッシュからデータを取得する
    ○ 自分しか変更できないデータに有効
    

    View Slide

34. StaleTimeを使用する
    ● staleTime：0
    ○ 基本はこの設定で良い
    ● staleTime：Infinity
    ○ データが更新されるタイミングがわかっていれば
    Infinityにして、更新時に明示的にinvalidateする
    最新性を優先する
    

    View Slide

35. Client State vs Server State
    Client State Server State
    所有者 クライアントが完全に所有している リモートに操作されうる
    同期性 同期的に使用することができる 非同期的に使用する必要がある
    最新性 常に最新の状態である 状態が古くなる可能性がある
    

    View Slide

36. Thanks!!!
    

    View Slide

37. Thanks!!!
    ● Twitter
    ○ https://twitter.com/ytaisei_
    ● Qiita
    ○ https://qiita.com/taisei-13046
    ● Zenn
    ○ https://zenn.dev/taisei_13046
    

    View Slide