React Hooks - useSWR について

業務でNext.js × TypeScript を使う機会があり、useSWRについて調査したため書き残しておきます。

＊useSWRとは

React Hooksのひとつで、APIでのデータ取得を最適化してくれる機能です。

インストール

$ npm install swr

＊環境

MacOS
swr：2.2.5
react ：18.2.0
next：14.1.0

＊参考

https://swr.vercel.app/ja

＊useSWRの使い方

第一引数には、一意となるkeyを指定します。
key単位でキャッシュを管理し、無駄に実行させないよう制御してくれます。
第二引数には、API呼び出し処理などのfetcherを指定します。下記は指定したkey名でAPI呼び出しをするようにしています。（基本的にkey名と呼び出すAPIパス名は同じにすることが望ましいです）

import  useSWR  from  "swr";

const  fetcher  =  (url:  string)  =>  fetch(url).then((res)  =>  res.json());

const  Input:  React.FC  =  ()  =>  {
  ...
  
  const { data, error } = useSWR(`/api/sample`, fetcher, { 
    revalidateOnFocus: false,
    revalidateOnReconnect: false,
    refreshInterval:  1000,
  })
  if (error) {
    console.log("api error!!")
  }
  console.log("data:", data)

＊useSWRに指定可能なオプション

詳細は公式サイトに記載されていますが、下記オプションなどが指定できまます。
※参考：https://swr.vercel.app/ja/docs/api.ja#options

revalidateOnFocus：ウィンドウがフォーカスされたときに自動的に再検証させる（デフォルト true）
revalidateOnReconnect：ブラウザがネットワーク接続を回復した際に自動的に再検証させる（デフォルト true）
refreshInterval：ms指定して一定間隔で処理を実行させる（デフォルトでは無効）

＊useSWRImmutable

useSWRImmutable を使用することで、前回データと同じ場合はAPI呼び出しを実行させないようにすることが可能です（useSWRで下記オプションを指定して設定することも可能です）

※参考：https://swr.vercel.app/ja/docs/revalidation#disable-automatic-revalidations

import  useSWRImmutable  from  "swr/immutable";

const fetcher = (url: string) => fetch(url).then((res) => res.json());

const Input: React.FC = () => {
... 

  const { data, error } = useSWRImmutable(`/api/sample`, fetcher)
  if (error) {
    console.log("api error!!")
  }
  console.log("data:", data)

...

＊所管

無駄な処理を行わないようにしてくれるとても便利な機能なことは知っていましたが、オプションで実行方法を指定できるのは知らなかったため勉強になりました。
useSWRを使ったエラー発生時の最適なハンドリングなども調べていきたいと思います。

もぐもぐプログラミング