A small observation in calling useSWR with the same key in different components at one time.

[sengho66]

So I was googling for answers to why useSWR is being called a few time and therefore making few network requests when it fact it should only make one network request. I found a simple solution to fixed it when playing around with my app.

I have a page that uses a custom swr hook that is used in the navigation bar and two different components that are completely isolated from one another. Meaning each of them has their own and that makes it three custom swr hooks being called at the same time, only one network request is being made. However when navigating to a new page, now this page only has one component using the same custom swr hook with the same key as the navigation bar, they now perform their own network requests meaning there's now a total of two network requests instead of one. We all should know that useSWR should only be making one network requests no matter how many components are calling the hook with the same key. How I solved this was adding a key prop to my layout component fixed the issue.

The components that share the same hook looks like this:

export const getData = (d) => {
  return useSWR([`https://example.dot/${d}`], fetcher, {
    refreshInterval: 12600,
    revalidateOnFocus: true,
    revalidateIfStale: false,
  });
};

in _app:

import { useRouter } from "next/router";

const MyApp = ({ Component, pageProps }) => {
  const router = useRouter();
  return (
    <Layout key={router.asPath}>
      <Component {...pageProps} />
    </Layout>
  );
};

To anyone who faced the same issue as I did, try this out and see if it works.

[shuding]

When you add a key to the Layout component, it re-mounts (un-mount and then re-mount), instead of re-renders when changing the route. Curious about the root cause, would be great if you can share an example demo (https://stackblitz.com or https://codesandbox.io) that we can take a look.