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
useSWRについて
Search
魔迦論
May 01, 2025
0
8
useSWRについて
useSWRとは
(番外編)useEffectでデータ取得?
魔迦論
May 01, 2025
Tweet
Share
More Decks by 魔迦論
See All by 魔迦論
GitHub Actionsのハンズオン
mackalong
0
24
英文の読み方
mackalong
0
9
OpenAPIについて
mackalong
0
16
JWTについて_基本編
mackalong
1
9
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
RailsConf 2023
tenderlove
30
1.1k
How to Ace a Technical Interview
jacobian
276
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
How to train your dragon (web standard)
notwaldorf
92
6.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Building an army of robots
kneath
306
45k
Bash Introduction
62gerente
614
210k
Transcript
useSWR について
useSWR とはなにか 概念 API からのデータ取得を手助けするReactHooks ライブラリ SWR : Stale-While-Revalidate (古い情報を先に見せて、裏で更新する戦略)
やってること 1. Stale : キャッシュから古いデータ取得& 表示 2. While : その間に( 非同期) 、最新データ取得& 表示 3. Revalidate : 取得した最新データをキャッシュに書き込む
実体( 基本的な使い方) //まずはfetcher(中身はaxios または fetch) const fetcher = (url: string)
=> axios.get(url).then(res => res.data); export default function Profile() { //宛先urlと作ったfetcherを引数で渡す const { data, error, isLoading } = useSWR('/api/user', fetcher); //データ取得できるまではisLoadingがtrue if (isLoading) return <div>読み込み中...</div>; if (error) return <div>エラーが発生しました</div>; return <div>こんにちは、{data.name}さん!</div>; }
何が良いのか 可読性が高い ⇨useEffect などを使うより読みやすい( 後述) 先述したキャッシュ戦略 ⇨UX の向上 ⇨UI を待たせないという非同期処理の強みをより強固にする
( 番外)useEffect でデータ取得? useEffect でのデータ取得については賛否両論ある(?) → それについては理解が深まったら更新予定 ただ、useEffect を単なるデータ取得に使うのはコスパ悪い印象 →
エラーハンドリングなどを自前で実装する必要あり(?) → コードが複雑になる ⇨可読性が低くなる ⇨意図しない再レンダリング せっかくデータ取得に特化したuseSWR があるなら そっち使ったほうが良い
( 番外)fetch とaxios について どちらも非同期のAPI リクエスト処理を行うモジュール 比較項目 fetch axios 標準かどうか
標準 外部 レスポンスのJSON 変換 手動 自動 機能性 自前で色々書く 豊富な設定 シチュエーション 小規模 中~ 大規模