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