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.3k
【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で型安全かつ効率的なルーティングを実現
ytaisei
4
810
BunがCommonJSをサポートする理由
ytaisei
2
120
TanStack Router SPA開発の選択肢になるか(+TanStack Query)
ytaisei
1
690
React Queryは非同期の状態管理ライブラリだ
ytaisei
2
1.4k
アウトプットが与える影響 〜価値を最大化するための学習サイクル〜
ytaisei
2
1.6k
OpenAPIコード生成ライブラリを 『Orval』に移行した理由
ytaisei
1
2.6k
Other Decks in Technology
See All in Technology
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
38k
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
3.3k
Google Cloudを組織(企業)で運用する時のベストプラクティス × 健康の環境分離戦略 #まるクラ勉強会
yasumuusan
0
210
Platform Engineering - Lessons Learned - Cloud Native Experience 2024
fernandoike
1
130
From here to resilience - a travel guide
ufried
1
170
生成AIと産業向けソフトウェアの自動生成 〜 ハノーバーメッセ2024より〜
kioto
2
460
TiDBにおけるテーブル設計と最適化の事例
cygames
0
820
使われないものを作るな!出口から作るデータ分析基盤 / Data Platform Development Starting from the User Needs
amaotone
16
5k
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
4
800
【SORACOM UG 四国】今だからこそ学ぶ!IoTの全体像と最新事例、生成AIの基礎
soracom
PRO
2
230
データベース05: SQL(2/3) 結合質問
trycycle
0
120
組織を強くするPdMのマインド / PMHub vol.2
pictiny
3
190
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
The Invisible Customer
myddelton
114
12k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Visualization
eitanlees
137
14k
Teambox: Starting and Learning
jrom
128
8.4k
The Cult of Friendly URLs
andyhume
74
5.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Building an army of robots
kneath
300
42k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
It's Worth the Effort
3n
180
27k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Making the Leap to Tech Lead
cromwellryan
125
8.6k
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! ご清聴ありがとうございました!