useSWRを使ってみた

useSWRを使ってみたので思ったことやメリット・デメリットでも書いていこうと思います。

useSWRとは

reactのデータフェッチを楽にしてくれるライブラリです。以下公式の引用なのですが

import useSWR from 'swr'

function Profile () {
 const { data, error } = useSWR('/api/user/123', fetcher)

 if (error) return <div>failed to load</div>
 if (!data) return <div>loading...</div>

 // render data
 return <div>hello {data.name}!</div>
}

このようにかなり簡単にapiを叩くことができてしまいます。フックの返り値としてデータ(apiから帰ってきたデータ)とerror(apiから帰ってきたエラー)を返してくれます。またデータ・エラーがない時はローディング中という判定も行うことができます。記述としては以下のような感じです。

    isLoading: !error && !data,

このisLoadingを返すだけでローディング中かどうかの判定ができます。

今回はSWRの説明というよりかはメリットデメリットについて書きたいのでここら辺で終わっておきます。

メリット

書いていて感じたメリットですが

・apiを叩く部分の記述が簡潔になる

それゃそうだろと言われそうですが記述量が少なくなり簡潔になります。本来必要なuseEffectも必要ないですしaxiosで書くのと比べても記述量は減ります。

・定期的にapiを叩いてくれる

自動的に叩いてくれます。apiを叩いてエラーが出てしまった時やブラウザのタブ切り替え時に叩いてくれます。これによってブラウザに常に最新の情報が取得されます。

本番環境ではメリットであると思うのですが開発環境ではよくも悪くもといった感じです。apiからエラーが返ってきたときにログを見て確認しようとしても自動で次々と叩くためエラーログがどんどん増えていきます。設定で挙動を変えれるのでデメリットではないとは思いますが。

デメリット

・ほぼGET専用

使い始めてからあまり立っていないからかもしれませんが機能を見てもGET専用である気がします。POSTリクエストを送ってそのデータをずっと保存したりする必要はないですし、定期的に叩かれたら困りますよね？そもそもGETリクエストで使うメリットはあまりない気がします。

こちらのページを見た感じその情報を更新してもう一度叩くと言ったこともできますが使う場面は限られている気がします。

GET以外のメソッドを叩くときはおとなしくfetct api もしくは axiosあたりでたたきましょう。

・任意のタイミングでは叩けない

GET専用である理由の追加になるかもしれないですが任意のタイミングでは叩けないです。おそらくフックが呼び出されたタイミングで実行されるのだと思います。なのでボタンを押すと実行といったことはできないと思います。