2023/1/13の勉強会で発表されたものです。

1. SWRライブラリについて
執筆者：トビウオ

2. 使用例
import useSWR from 'swr'
function Profile() {
const fetcher = (url) => fetch(url).then((res) => res.json());
const { data, error, isLoading } = useSWR('/api/user', fetcher);
if (error) return <div>failed to load</div>;
if (isLoading) return <div>loading…</div>;
return <div>hello {data.name}!</div>;
}
https://swr.vercel.app/ja のコードから説明のため加筆したもの

3. それぞれの変数について
変数名 意味
data
読み込み中はundefined,
読み込み完了すると実データ
error
エラーがないときはundefined,
エラーがあるときはそれ以外
isLoading
読み込み中はtrue,
読み込み完了するとfalse
const { data, error, isLoading } = useSWR(key, fetcher)

4. それぞれの変数について
const { data, error, isLoading } = useSWR(key, fetcher)
出典：https://swr.vercel.app/ja/docs/advanced/understanding

5. それぞれの引数について
const { data, error, isLoading } = useSWR(key, fetcher)
変数名 意味
key
fetcherの引数に渡すキー。
例えばURLとか
fetcher データを取得し、その値を返す関数
。例えばfetchをラップして使う

6. それぞれの引数について
const { data, error, isLoading } = useSWR(key, fetcher)
出典：https://swr.vercel.app/ja/docs/advanced/understanding

7. SWRを使う利点
• 「データを読み込んで表示」という定番処理に
ついて、プログラム上で扱いやすく処理できる
• データを自動でキャッシュするので無駄な読み
込みを防げる
• ポーリング、自動再読込、自動再試行……