【2023】SWR vs TanStack Query

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

Transcript

1. 早稲田大学4年　安井大晟 【2023】 SWR vs TanStack Query
2. 01 自己紹介 Table of contents 04 キャッシュの比較 02 interfaceの比較 05 03 機能面の比較 まとめ
3. 自己紹介 01
4. 2019年：早稲田大学教育学部入学（元教員志望） 2021年：42Tokyo入学 2022年：エンジニアを目指し休学 2023年：フロントエンドでキャリアをスタート 安井大晟（たいせー）
5. interfaceの比較 02
6. TanStack Query SWR
7. TanStack Query SWR • キャッシュ識別のためのkey • データ取得のための非同期関数
8. 機能面の比較 03
9. TanStack Query
10. SWR
11. SWR 扱える非同期の状態が圧倒的に違う
12. とはいえ数が多いことの辛さもある...
13. メジャーバージョンアップでの破壊的変更
14. onSuccess系オプションの廃止😩 注意）useMutationは廃止されない
15. staleTimeが関係している 前提：staleTimeをInfinityに設定した場合 1. useQueryでデータを取得 → キャッシュに保存 2. 再度useQueryが呼ばれるが、キャッシュが存在するのでデータを返却 3. キャッシュがfreshなのでqueryFnが呼ばれない 4. 結果的にonSuccess系オプションが発火しない
16. staleTimeが関係している 前提：staleTimeをInfinityに設定した場合 1. useQueryでデータを取得 → キャッシュに保存 2. 再度useQueryが呼ばれるが、キャッシュが存在するのでデータを返却 3. キャッシュがfreshなのでqueryFnが呼ばれない 4. 結果的にonSuccess系オプションが発火しない キャッシュがfreshの時と、そうでない時で 結果に差分が生まれてしまう。 例）onSuccessで setStateやデータ変換をしていた場合は ...
17. useQueryでonSuccess系のオプション使っ てるコードよく見る😢
18. TanStack Queryの豊富な機能は大きなメリットだが、メ ジャーバージョンアップでの破壊的変更に 追従していく覚悟は必要
19. キャッシュの比較 04
20. TanStack Queryのキャッシュ管理 • staleTime ◦ キャッシュをstale（古くなったとみなす） 状態にするまでの期間 ◦ デフォルト：0 • cacheTime ◦ キャッシュをガベージコレクション（メモリ領域の開放）するまでの 時間 ◦ デフォルト：5分
21. TanStack Queryのキャッシュ管理 • staleTime ◦ キャッシュをstale（古くなったとみなす） 状態にするまでの期間 ◦ デフォルト：0 • cacheTime ◦ キャッシュをガベージコレクション（メモリ領域の開放）するまでの 時間 ◦ デフォルト：5分 キャッシュの生存期間を厳密に指定できる （SWRには無い）
22. まとめ 05
23. SWR vs TanStack Query SWR • 必要最小限の状態を提供 • シンプルな設計 TanStack Query • 豊富な非同期の状態を処理ができる • キャッシュの管理も柔軟
24. 補足：SWR2.0からMutation HooksとDev Toolが 追加されている！
25. SWR vs TanStack Query 「とりあえずGlobal State管理（Redux）からサーバの状態を剥がしたい」 「アプリケーション設計がマッチしていてシンプルに非同期の状態を扱いたい」 SWRが良さそう 「より厳密なキャッシュ管理や複雑な非同期の状態を扱いたい」 TanStack Queryが良さそう
26. THANKS! ご清聴ありがとうございました！