React Query causes rerenders on component mount

[piszczu4]

I have the following hook to fetch user from database:

export const useCurrentUser = () => {
  const enabled = !isGuestUser();

  return useQuery({
    queryKey: ['currentUser'],
    queryFn: () => getCurrentUser(),
    gcTime: Infinity,
    initialData: enabled
      ? (jwtDecode(localStorage.getItem('token') as string) as User)
      : ({} as User),
    enabled,
    refetchOnWindowFocus: false,
  });
};

So the initialData are taken from localStorage (just user id) and full user data are fetched from database. The problem is that I use this hook in various components and the following issue arised:

• I use query to get user in parent component
• then I have some child components and one of theme open a dialog whose content again uses useCurrentUser query to fetch user. At that point all components that uses useCurrentUser are rerendered and entire page is resetted (dialog is closing as well).

I added staleTime: Infinity and then there is no rerenders but the data is never fetched (alwasys initialData is taken). So I added the following to my global provider:

  useEffect(() => {
    queryClient.prefetchQuery({
      queryKey: ['currentUser'],
      queryFn: () => getCurrentUser(),
    });
  }, []);

and now it works and there is no rerenders (no refetching) - is that a proper solution or I can simplify it?

[TkDodo]

At that point all components that uses useCurrentUser are rerendered

show a minimal reproduction please because this shouldn't happen