5861で提唱された、SWRというキャッシュ無効化戦略に基づくライブラリ。簡単に言うと、最初は普通にデータを取得してキャッシュとしてセット、次に参照された時に一旦キャッシュを返して、裏でまたフェッチして、フェッチが完了したらキャッシュを最新のものに置き換えるというキャッシュ戦略をよしなにやってくれる。https://swr.vercel.app/ja個人的に理解が浅くてハマったところを紹介する。通常axiosなどをそのまま使う場合はloadingのstateは自前で管理するだろう。}}SWRの例SWRを使用してデータをfetchする場合、このようにloadingの管理をすることになる。これは公式にも書いてある例である。}}ハマりどころここでまずハマるのが、SWRの方のloadingは一度データを取得したらもう二度とtrueにならないことだ。APIを必ず叩くので、しっかりとloadingが一度trueになる。!dataで定義してあるloadingはtrueにならない。これはユーザー体験的、パフォーマンス的にはとても良い。このようなコードがあれば、ユーザーはローディングを初回しか見ずに済む。/>2回目以降は一瞬古いユーザーの情報が表示されて、fetchが完了次第すぐに最新のユーザー情報に切り替わる。loadingをLoadingコンポーネントの出し分けのみに使うならとても良い。(古い情報が一瞬出るという点を許容できるなら)問題のある使い方しかし、loadingをビジネスロジックに関わるような扱い方をしたい場合は少し困る。<>{children}</>}これはユーザーがログインした時点で未読のお知らせがあれば、お知らせページに飛んで欲しいというものである。useEffect使うなみたいな議論はさておき。これだけだとユーザーが以下のように動くと問題が起きるログインするnoticeが帰ってきてユーザーはお知らせページに飛ばされ、ユーザーが既読をつけるログアウトする再度ログインするすると、このPrivateがまたレンダリングされるわけだが、useNoticeBySWRはnoticeのキャッシュを持っている。returnが効かない。noticeがあるのでそのままユーザーはなぜか既読のお知らせに飛ばされる。/>も効かないので一瞬ログイン後のダッシュボード画面かなんかがちらついて、その後にお知らせに飛ばされることになる。mutateを使うシンプルな話、古いキャッシュが残ってしまっていることが原因である。この例のようにレンダリング前に実行しておきたいロジック(ページの出しわけや認証など)は再検証前のキャッシュを使われると困ることがある。回避するかというと、やり方は色々あるが先ほどのお知らせの例のように、もう絶対に使わないようなデータをキャッシュしておくのは無駄だし、ログイン後に取得したデータのキャッシュがログアウト後に残っているのは危険だ。SWRに忘れてもらおう。//...}(mutateも、おそらくreadNoticeRequestもPromiseを返すので本当はuseEffectの中身を(async(){})()で囲む必要があるがわかりやすさのために省略した)mutateとはキャッシュの内容を変更するメソッドである。このコードはuseNoticeBySWRが返すnoticeをnullに変更し、第二引数でfalseを渡して、revalidate(再検証、ここでは再度APIを叩くこと)しないという内容である。ここでまた一つ落とし穴があるのだが、mutateの第一引数は省略可能、つまりデフォルト値がundefinedなのでundefinedを渡すと普通に無視される(キャッシュをundefinedにはできない)ので仕方なくnullを入れている。今度issueあげてみようかなこれ。2022年1月24日追記:上記のバグは以下のPRで修正されていました。https://github.com/vercel/swr/pull/1515もちろんAPIがnullishな値を返すなら普通に再検証しても良い。isValidatingを使うisValidatingとはuseSWRが返す、再検証中かどうかのフラグである。前述した通り、SWRはキャッシュを返しつつ、裏で再検証するので、再検証中ならloadingとすることで同じことが可能である。<>{children}</>}ただ、SWRは分割代入で受け取る変数によってパフォーマンス最適化が行われているため、なるべくならmutateの方で対策した方が良い。https://swr.vercel.app/ja/docs/advanced/performance#依存関係のコレクションさらにキャッシュ自体がなくなるわけではないので、キャッシュが残っているせいで何かが起きるという危険性は依然としてある。まとめ個人的にSWRは今仕事で使っていて、とても要件にマッチしていて良いと感じている。https://twitter.com/engineerYodaka/status/1483593076367302656しかし、誰かが昔言ったように「キャッシュは麻薬」である。麻薬は用法用量を守って正しく使う必要がある。mutateをうまく使って、正しくキャッシュと向き合っていこう。ハマる予定なので、SWR関連の記事はもう少し書くかも。よだかフリーランスでwebエンジニアやらせてもらってます。Goバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。バッジを贈るDiscussionよだかフリーランスでwebエンジニアやらせてもらってます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。