useSWRについて

useSWRとは
(番外編)useEffectでデータ取得？

Transcript

1. useSWR について
2. useSWR とはなにか 概念 API からのデータ取得を手助けするReactHooks ライブラリ SWR : Stale-While-Revalidate （古い情報を先に見せて、裏で更新する戦略） やってること 1. Stale : キャッシュから古いデータ取得& 表示 2. While : その間に( 非同期) 、最新データ取得& 表示 3. Revalidate : 取得した最新データをキャッシュに書き込む
3. 実体( 基本的な使い方) //まずは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>; }
4. 何が良いのか 可読性が高い ⇨useEffect などを使うより読みやすい( 後述) 先述したキャッシュ戦略 ⇨UX の向上 ⇨UI を待たせないという非同期処理の強みをより強固にする
5. ( 番外)useEffect でデータ取得？ useEffect でのデータ取得については賛否両論ある(?) → それについては理解が深まったら更新予定 ただ、useEffect を単なるデータ取得に使うのはコスパ悪い印象 → エラーハンドリングなどを自前で実装する必要あり(?) 　→ コードが複雑になる 　　⇨可読性が低くなる 　　⇨意図しない再レンダリング せっかくデータ取得に特化したuseSWR があるなら そっち使ったほうが良い
6. ( 番外)fetch とaxios について どちらも非同期のAPI リクエスト処理を行うモジュール 比較項目 fetch axios 標準かどうか 標準 外部 レスポンスのJSON 変換 手動 自動 機能性 自前で色々書く 豊富な設定 シチュエーション 小規模 中~ 大規模