ReactQueryのキャッシュについて理解する
こんにちは、CURUCURUエンジニアの水谷です。 最近Reactを学習し始めたのですが、その中でReactQueryについて沼った箇所があったので、ブログでまとめてみます。
ReactQueryについて
そもそもReactQueryとはについて書いておきます。 ReactQueryは、React hooksをベースにした状態管理のライブラリです。 ›ReactQuery ※今は名前が変わってTanStack Queryというらしいです。
ReactQueryは状態をクライアント側でキャッシュとして保持しておいて、サーバーとの通信負荷を下げるようにする機能があるのですが、そのキャッシュの保持する時間で沼ったのでブログでまとめます。
ReactQueryのキャッシュについて
キャッシュを保持する機能として下記があります。
- cacheTime
- staleTime
デフォルトだとcacheTImeの方は５分、staleTimeの方は0秒となっています。
で、この２つの意味の違いに注意が必要です。
- cacheTime：キャッシュを保持しておく時間
- staleTime：キャッシュを古くなったとみなす時間
わかりにくいので、ちょっと具体例で書いておきます。
ReactQueryのcacheTimeとstaleTimeの比較
- cacheTime：5分
- staleTime：3分
上記の場合、キャッシュを保持しておく時間が５分です。そして、キャッシュが古くなったとみなす時間が３分です。
１分経過後
キャッシュを保持しているし、キャッシュは新しいデータとして保持しています。
3分経過後
staleTimeの時間を経過したので、キャッシュは古いデータとしてみなされます。 この場合、キャッシュは返しますが、バックグラウンドでサーバーから取得してきます。
５分経過後
cacheTimeを経過したので、キャッシュは保持しておらずサーバーからデータを取得してきます。 なお、staleTime経過時にサーバーから取得していた場合は、そこからの５分は有効です。
この動作を踏まえると、
- cacheTime：3分
- staleTime：5分
こういった設定は意味がなく、cacheTimeのみ考えたらよく、staleTimeはデフォルトが0なので、Infinityを設定するとシンプルになります。
ざっくりまとめておくと、、
- 頻繁にデータ更新がある：staleTimeを短くする
- あまりデータ更新がない：staleTimeを長くする
上記が良いのかなと思いました。 いずれにしてもキャッシュを有効活用して、通信の負荷を下げれるように活用したいと思いました。
