同一keyのuseSWRを複数箇所で同時にリクエストしたときの挙動を調査する

知りたかったこと

同一keyを持つuseSWRを複数のコンポーネントで同時に呼び出したときに複数回無駄にリクエストが飛んでしまわないかどうかを調査した。

例えばuseSWR("/users/me", fetcher)を呼び出すコンポーネントが1つのページに3つ配置されていたときに「1度だけ/users/meにリクエストが飛ぶのか、3度リクエストされてしまうのか」を知りたかった。

調査時のswrのバージョン

以下の2つのバージョンで調査した。

• 1.3.0
• 2.0.0-beta.6

調査内容

swrの開発者のshudingさんがちょうどいいサンプルを作ってくれていたのでforkしたうえで実験してみた。

https://codesandbox.io/s/tuqtf

useUserというユーザーのデータを取得するフックを複数のコンポーネントから同時に呼び出してみる。

export default function useUser() {
  const { data, mutate, error } = useSWR("api_user", userFetcher);
  // ...
}

👆のuserFetcherの中にconsole.log("fetching...")を仕込んでおき、コンソールに表示される回数をチェックする。

結果

4箇所でuseUser()を呼び出したが、consoleに表示されたログは1つだけだった。

複数箇所で同時に呼び出した場合にも（keyが同じであれば）無駄なリクエストが飛ばないことが分かった。

軽くソースコードを読んだところ、各フックでスタートを共有し、一定期間同一キーでリクエストが取ばないようにしている模様。

https://github.com/vercel/swr/blob/main/core/use-swr.ts

この「一定期間」はdedupingIntervalオプションをにより調整ができる（デフォルトで2秒）。

https://swr.vercel.app/docs/options