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
1.9k
【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
Reactのトランジションを覗いてみる
ytaisei
1
1.2k
Deep Dive Into React 〜React Fiber Architectureについて〜
ytaisei
1
78
React19で状態管理はどう変わるか
ytaisei
2
110
TanStackで効率的なルーティングとデータ取得を実現
ytaisei
8
1.4k
TanStack Routerで型安全かつ効率的なルーティングを実現
ytaisei
4
1.6k
BunがCommonJSをサポートする理由
ytaisei
2
280
TanStack Router SPA開発の選択肢になるか(+TanStack Query)
ytaisei
2
1.3k
React Queryは非同期の状態管理ライブラリだ
ytaisei
3
1.8k
アウトプットが与える影響 〜価値を最大化するための学習サイクル〜
ytaisei
2
1.9k
Other Decks in Technology
See All in Technology
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
9
1.6k
脳波を用いた嗜好マッチングシステム
hokkey621
0
160
JEDAI Meetup! Databricks AI/BI概要
databricksjapan
0
280
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
27
14k
RSNA2024振り返り
nanachi
0
620
人はなぜISUCONに夢中になるのか
kakehashi
PRO
6
1.7k
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
1.1k
全文検索+セマンティックランカー+LLMの自然文検索サ−ビスで得られた知見
segavvy
2
130
「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly
i35_267
1
520
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
770
2025-02-21 ゆるSRE勉強会 Enhancing SRE Using AI
yoshiiryo1
1
420
2/18/25: Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
0
150
Featured
See All Featured
Producing Creativity
orderedlist
PRO
344
39k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Why Our Code Smells
bkeepers
PRO
336
57k
4 Signs Your Business is Dying
shpigford
182
22k
Documentation Writing (for coders)
carmenintech
67
4.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Fireside Chat
paigeccino
34
3.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
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! ご清聴ありがとうございました!