Prefetching data on hover in combination with global loading indicator causes infinite rerenders

[Kukuliak-Dmytro]

Greetings, everyone.
I`ve been learning React Query for the past week, and I ran into a problem I can't seem to find an answer to. I have a basic app that fetches data from a placeholder API. I implemented a prefetch hook, which works well. I use it when hovering over a page link to fetch all the data for that page (a list of posts/albums), and then to fetch data about a specific post/album when hovering over its card. Everything worked well – the values get cached and the page loads instantly.

But then I decided to implement a global loading indicator using the useIsFetching() hook. The result is that when I hover, and the prefetch is being triggered, I get infinite re-renders (or refetches?).

Here's what I have:

The prefetch hook I created:

const usePrefetch = (fetchData: ({ queryKey }: { queryKey: QueryKey }) => Promise) => {
  const queryClient = useQueryClient();
  queryClient.setDefaultOptions({
    queries: {
      refetchOnMount: false,
      refetchOnReconnect: false,
      refetchOnWindowFocus: false,
      refetchIntervalInBackground: false,
    },
  });

  const prefetch = async (queryKey: QueryKey) => {
    await queryClient.prefetchQuery({
      queryKey,
      queryFn: () => fetchData({ queryKey }),
    });
  };

  return prefetch;
};

How I use the hook:

const prefetchPost = usePrefetch(fetchPost);
const prefetchComments = usePrefetch(fetchPostComments);

...
onMouseEnter={() => {
  prefetchPost(['posts', post.id.toString()]);
  prefetchComments(['comments', post.id.toString()]);
}}

The global loading indicator:

export function LoadingOverlay() {
  const isFetching = useIsFetching();

  if (!isFetching) return null;

  return (
    <div className="loading-overlay">
      <div className="spinner"></div>
    </div>
  );
}

The Problem:

When I hover and the prefetch is being triggered, I get infinite re-renders (or refetches?). How can I fix this issue so that I don’t get stuck in an infinite loop, and the global loading indicator works as expected?

Any help would be appreciated. The original repo, deployed app and minimal example on sandbox are below.
Here is the app repo: https://github.com/Kukuliak-Dmytro/React-Query
Here is the deployed application: https://kukuliak-dmytro.github.io/React-Query/
Here is the minimal example (only posts):https://codesandbox.io/p/github/Kukuliak-Dmytro/React-Query/code-sandbox-minimal

[TkDodo]

I have tried to disable all refetch options in the queryClient

a) not a good idea as setting default options doesn’t affect already mounted instances and
b) this is not a matter of refetches, but of “staleTime”

prefetching respects staleTime, so every time the prefetching gets triggered, it will fire a request unless it sees fresh data in the cache. staleTime is zero per default, so it will always trigger a fetch when called.

Now in your case:

• the user hovers the link, prefetch triggers
• this triggers the overlay (which is above the link, so it triggers a mouseout)
• fetch finishes, overlay goes away
• this triggers the mouse cursor to hover the link again
• this triggers another prefetch

not sure what’s the point of such an overlay, as it will actively hinder me in clicking the link, but if you want to only have a single prefetch, set staleTime: Infinity

[Kukuliak-Dmytro]

Thank you for taking the time. Indeed, I have changed the stale time, and the issue disappeared. But there is another issue, which stems from the poor architecture of my app - when I hover over, it indeed prefetches, and as a result, I get a loading indicator for a brief time - and no re-renders.
On another note, could you please give me some guidance? How is it best to implement the spinner globally, but for it not to show in prefetches? This loading indicator was meant for Update and Delete operations on separate resources, not for showing when the prefetch is happening. What would be the best approach to change it? As I understand, I can't pass queryKeys when mutating, so that checks itself out. Should I add this spinner component only in those components where the mutation happen, and pass the mutation loading state? Or is there any alternative? I would greatly appreciate that.

[TkDodo]

if you want it to only show up on mutations, useisMutating is what you want.

[Kukuliak-Dmytro]

Thank you kindly, it worked exactly like I wanted to!