【React】SWR使ったメモ

import useSWR from 'swr'
 
function Profile() {
  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>
}

概要

• 第一引数では通常APIのURL、第二引数ではfetcherという関数
• fetcherは任意の非同期関数でネイティブのfetchやAxiosのようなツールを使用据えうことができる
• data/isLoading/errorの３つの値を返す

特徴

• コードが簡潔になる
• 速い、軽量、再利用可能なデータ取得
• 重複リクエストがなくなる
  SWRキー(fetchURL)が同じ場合ほぼ同時にレンダリングされるため、たった一度のネットワークリクエストのみが行われる
• 自動再検証
  ページにフォーカスを合わせるかタブを切り替えたり、ユーザーがオンラインになったりSWRは自動的にデータを再検証する

useSWRImmutable

useSWRでは自動で再検証を行うので、タブを切り替えたりすると自動にデータを再検証し、画面の内容を常に最新の状態に保つことができる。しかし、そこまでデータを最新にする必要がない場合、無駄なデータ更新を増やしてしまう。データの再検証を無効化して再フェッチしないようにしたい場合は、useSWRImmutableを使用するとよい。

useSWRMutation

任意のタイミングでデータ取得をしたい場合、（今回onClickイベントが走った際にデータ取得したかった）SWRMutationを使用する。useSWRではレンダリングがされた時点でデータが取得されてしまうのでそちらを回避するため。
返り値のtriggerと呼ばれるhookを呼び出すことで初めてミューテーションが行われる。

【参考】https://weseek.co.jp/tech/4181/

c.sakyou