【2023】SWR vs TanStack Query

Slide 1

Slide 1 text

早稲田大学4年　安井大晟【2023】 SWR vs TanStack Query

Slide 2

Slide 2 text

01 自己紹介 Table of contents 04 キャッシュの比較 02 interfaceの比較 05 03 機能面の比較まとめ

Slide 3

Slide 3 text

自己紹介 01

Slide 4

Slide 4 text

2019年：早稲田大学教育学部入学（元教員志望） 2021年：42Tokyo入学 2022年：エンジニアを目指し休学 2023年：フロントエンドでキャリアをスタート安井大晟（たいせー）

Slide 5

Slide 5 text

interfaceの比較 02

Slide 6

Slide 6 text

TanStack Query SWR

Slide 7

Slide 7 text

TanStack Query SWR ● キャッシュ識別のためのkey ● データ取得のための非同期関数

Slide 8

Slide 8 text

機能面の比較 03

Slide 9

Slide 9 text

TanStack Query

Slide 10

Slide 10 text

SWR

Slide 11

Slide 11 text

SWR 扱える非同期の状態が圧倒的に違う

Slide 12

Slide 12 text

とはいえ数が多いことの辛さもある...

Slide 13

Slide 13 text

メジャーバージョンアップでの破壊的変更

Slide 14

Slide 14 text

onSuccess系オプションの廃止😩 注意）useMutationは廃止されない

Slide 15

Slide 15 text

Slide 16

Slide 16 text

staleTimeが関係している前提：staleTimeをInﬁnityに設定した場合 1. useQueryでデータを取得 → キャッシュに保存 2. 再度useQueryが呼ばれるが、キャッシュが存在するのでデータを返却 3. キャッシュがfreshなのでqueryFnが呼ばれない 4. 結果的にonSuccess系オプションが発火しないキャッシュがfreshの時と、そうでない時で結果に差分が生まれてしまう。例）onSuccessで setStateやデータ変換をしていた場合は ...

Slide 17

Slide 17 text

useQueryでonSuccess系のオプション使ってるコードよく見る😢

Slide 18

Slide 18 text

TanStack Queryの豊富な機能は大きなメリットだが、メジャーバージョンアップでの破壊的変更に追従していく覚悟は必要

Slide 19

Slide 19 text

キャッシュの比較 04

Slide 20

Slide 20 text

TanStack Queryのキャッシュ管理 ● staleTime ○ キャッシュをstale（古くなったとみなす）状態にするまでの期間 ○ デフォルト：0 ● cacheTime ○ キャッシュをガベージコレクション（メモリ領域の開放）するまでの時間 ○ デフォルト：5分

Slide 21

Slide 21 text

TanStack Queryのキャッシュ管理 ● staleTime ○ キャッシュをstale（古くなったとみなす）状態にするまでの期間 ○ デフォルト：0 ● cacheTime ○ キャッシュをガベージコレクション（メモリ領域の開放）するまでの時間 ○ デフォルト：5分キャッシュの生存期間を厳密に指定できる（SWRには無い）

Slide 22

Slide 22 text

まとめ 05

Slide 23

Slide 23 text

SWR vs TanStack Query SWR ● 必要最小限の状態を提供 ● シンプルな設計 TanStack Query ● 豊富な非同期の状態を処理ができる ● キャッシュの管理も柔軟

Slide 24

Slide 24 text

補足：SWR2.0からMutation HooksとDev Toolが追加されている！

Slide 25

Slide 25 text

SWR vs TanStack Query 「とりあえずGlobal State管理（Redux）からサーバの状態を剥がしたい」「アプリケーション設計がマッチしていてシンプルに非同期の状態を扱いたい」 SWRが良さそう「より厳密なキャッシュ管理や複雑な非同期の状態を扱いたい」 TanStack Queryが良さそう

Slide 26

Slide 26 text

THANKS! ご清聴ありがとうございました！