$30 off During Our Annual Pro Sale. View Details »

【2023】SWR vs TanStack Query

ytaisei
September 25, 2023

【2023】SWR vs TanStack Query

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

ytaisei

September 25, 2023
Tweet

More Decks by ytaisei

Other Decks in Technology

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