Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
【2023】SWR vs TanStack Query
Search
ytaisei
September 25, 2023
Technology
1
2.1k
【2023】SWR vs TanStack Query
We Are JavaScripters! @42ndにて登壇した際の資料。
2023年度におけるSWRとTanStack Queryの比較を行いました。
ytaisei
September 25, 2023
Tweet
Share
More Decks by ytaisei
See All by ytaisei
TanStack Routerを新規プロダクトで1年間運用してみた結果
ytaisei
1
150
Reactを段階的に覗いてみる
ytaisei
3
1.7k
Reactのトランジションを覗いてみる
ytaisei
1
2.2k
Deep Dive Into React 〜React Fiber Architectureについて〜
ytaisei
2
290
React19で状態管理はどう変わるか
ytaisei
2
170
TanStackで効率的なルーティングとデータ取得を実現
ytaisei
9
2.1k
TanStack Routerで型安全かつ効率的なルーティングを実現
ytaisei
4
2.2k
BunがCommonJSをサポートする理由
ytaisei
2
390
TanStack Router SPA開発の選択肢になるか(+TanStack Query)
ytaisei
2
1.5k
Other Decks in Technology
See All in Technology
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
budougumi0617
4
1.2k
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
23
16k
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
880
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
260
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
400
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
130
いまさら聞けない ABテスト入門
skmr2348
1
190
Azure Well-Architected Framework入門
tomokusaba
0
260
Pythonによる契約プログラミング入門 / PyCon JP 2025
7pairs
5
2.5k
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
130
「Verify with Wallet API」を アプリに導入するために
hinakko
1
220
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
900
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Embracing the Ebb and Flow
colly
88
4.8k
Writing Fast Ruby
sferik
629
62k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
How to Think Like a Performance Engineer
csswizardry
27
2k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fireside Chat
paigeccino
40
3.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Transcript
早稲田大学4年 安井大晟 【2023】 SWR vs TanStack Query
01 自己紹介 Table of contents 04 キャッシュの比較 02 interfaceの比較 05
03 機能面の比較 まとめ
自己紹介 01
2019年:早稲田大学教育学部入学(元教員志望) 2021年:42Tokyo入学 2022年:エンジニアを目指し休学 2023年:フロントエンドでキャリアをスタート 安井大晟(たいせー)
interfaceの比較 02
TanStack Query SWR
TanStack Query SWR • キャッシュ識別のための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 Query SWR • 必要最小限の状態を提供 • シンプルな設計 TanStack
Query • 豊富な非同期の状態を処理ができる • キャッシュの管理も柔軟
補足:SWR2.0からMutation HooksとDev Toolが 追加されている!
SWR vs TanStack Query 「とりあえずGlobal State管理(Redux)からサーバの状態を剥がしたい」 「アプリケーション設計がマッチしていてシンプルに非同期の状態を扱いたい」 SWRが良さそう 「より厳密なキャッシュ管理や複雑な非同期の状態を扱いたい」 TanStack
Queryが良さそう
THANKS! ご清聴ありがとうございました!