【2023】SWR vs TanStack Query

We Are JavaScripters! @42ndにて登壇した際の資料。
2023年度におけるSWRとTanStack Queryの比較を行いました。

Transcript

1. 早稲田大学4年　安井大晟
   【2023】
   SWR
   vs
   TanStack Query
   

   View Slide

2. 01
   自己紹介
   Table of contents
   04
   キャッシュの比較
   02
   interfaceの比較
   05
   03
   機能面の比較
   まとめ
   

   View Slide

3. 自己紹介
   01
   

   View Slide

4. 2019年：早稲田大学教育学部入学（元教員志望）
   2021年：42Tokyo入学
   2022年：エンジニアを目指し休学
   2023年：フロントエンドでキャリアをスタート
   安井大晟（たいせー）
   

   View Slide

5. interfaceの比較
   02
   

   View Slide

6. TanStack Query
   SWR
   

   View Slide

7. TanStack Query
   SWR ● キャッシュ識別のためのkey
   ● データ取得のための非同期関数
   

   View Slide

8. 機能面の比較
   03
   

   View Slide

9. TanStack Query
   

   View Slide

10. SWR
    

    View Slide

11. SWR
    扱える非同期の状態が圧倒的に違う
    

    View Slide

12. とはいえ数が多いことの辛さもある...
    

    View Slide

13. メジャーバージョンアップでの破壊的変更
    

    View Slide

14. onSuccess系オプションの廃止😩
    注意）useMutationは廃止されない
    

    View Slide

15. staleTimeが関係している
    前提：staleTimeをInfinityに設定した場合
    1. useQueryでデータを取得 → キャッシュに保存
    2. 再度useQueryが呼ばれるが、キャッシュが存在するのでデータを返却
    3. キャッシュがfreshなのでqueryFnが呼ばれない
    4. 結果的にonSuccess系オプションが発火しない
    

    View Slide

16. staleTimeが関係している
    前提：staleTimeをInfinityに設定した場合
    1. useQueryでデータを取得 → キャッシュに保存
    2. 再度useQueryが呼ばれるが、キャッシュが存在するのでデータを返却
    3. キャッシュがfreshなのでqueryFnが呼ばれない
    4. 結果的にonSuccess系オプションが発火しない
    キャッシュがfreshの時と、そうでない時で
    結果に差分が生まれてしまう。
    例）onSuccessで
    setStateやデータ変換をしていた場合は ...
    

    View Slide

17. useQueryでonSuccess系のオプション使っ
    てるコードよく見る😢
    

    View Slide

18. TanStack Queryの豊富な機能は大きなメリットだが、メ
    ジャーバージョンアップでの破壊的変更に
    追従していく覚悟は必要
    

    View Slide

19. キャッシュの比較
    04
    

    View Slide

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

    View Slide

21. TanStack Queryのキャッシュ管理
    ● staleTime
    ○ キャッシュをstale（古くなったとみなす）
    状態にするまでの期間
    ○ デフォルト：0
    ● cacheTime
    ○ キャッシュをガベージコレクション（メモリ領域の開放）するまでの
    時間
    ○ デフォルト：5分
    キャッシュの生存期間を厳密に指定できる
    （SWRには無い）
    

    View Slide

22. まとめ
    05
    

    View Slide

23. SWR vs TanStack Query
    SWR
    ● 必要最小限の状態を提供
    ● シンプルな設計
    TanStack Query
    ● 豊富な非同期の状態を処理ができる
    ● キャッシュの管理も柔軟
    

    View Slide

24. 補足：SWR2.0からMutation HooksとDev Toolが
    追加されている！
    

    View Slide

25. SWR vs TanStack Query
    「とりあえずGlobal State管理（Redux）からサーバの状態を剥がしたい」
    「アプリケーション設計がマッチしていてシンプルに非同期の状態を扱いたい」
    SWRが良さそう
    「より厳密なキャッシュ管理や複雑な非同期の状態を扱いたい」
    TanStack Queryが良さそう
    

    View Slide

26. THANKS!
    ご清聴ありがとうございました！
    

    View Slide