Unexpected re-renders with useSuspenseQuery

[bloveridgerowe]

Hi there,

I'm very new to React so do forgive me if this is a stupid question. I've searched everywhere and spent hours to try and gain an understanding of why this is happening but I've yet to find an answer.

The behaviour I'm observing with useSuspenseQuery does not align with what I'm expecting. I truly would appreciate any insight you could share with me on what I'm doing wrong, or if this is indeed correct behaviour.

I've created an AuthProvider which internally uses useSuspenseQuery. The query calls getCustomerDetails which calls the /me endpoint on the backend. This endpoint will return 200 OK with the user's details if they have the correct auth cookies in place, or 401 Unauthorized if not. I catch this error and return null if this is the case (no user data, not logged in), or re-throw the error if something else has gone wrong.

export function AuthProvider({ children }: { children: ReactNode }) {
    const { data: user, isLoading, isError, status } = useSuspenseQuery({
        queryKey: queryKeys.customer,
        queryFn: async () => {
            try {
                console.log("useSuspenseQuery function called");
                return await getCustomerDetails();
            }
            catch (error) {
                if (error instanceof ApiError && error.status === 401) {
                    return null;
                }
                throw error;
            }
        },
        retry: false,
        staleTime: 60 * 1000,
        gcTime: 60 * 1000,
    });

    console.log({ source: "AuthProvider", user, isLoading, isError, status })   <-------

    return (
        <AuthContext.Provider value={{ user, isLoading, isError, status }}>
            {children}
        </AuthContext.Provider>
    );
}

I have a <Suspense> directly above it near the top of the tree to enable me to show a loading spinner while we deduce the auth state of the current user, as I don't want the webapp accessible until we know if they are logged in or not:

createRoot(document.getElementById('root')!).render(
    <QueryClientProvider client={queryClient}>
        <ErrorBoundary failure={<AppUnavailable/>}>
            <Suspense fallback={<AppLoading/>}>   <-------
                <AuthProvider>   <------------------------
                    <BrowserRouter>
                        <DisclaimerModal />
                        <Toaster />
                        <AppRoutes />
                    </BrowserRouter>
                </AuthProvider>
            </Suspense>
        </ErrorBoundary>
    </QueryClientProvider>
)

It works correctly from a UX point of view, but I'm noticing 2 or 3 re-renders during the initial app load. Most of the time it is 3, but sometimes it's only 2, it's not 100% consistent which leads me to believe it may be a timing issue.

This can be seen from the logs in the browser console, where I log:

1. From inside the queryFn
2. The values returned from useSuspenseQuery
3. When my AppLayout is called

What's further confusing me is why the 3 logged values returned from useSuspenseQuery are identical. Had the values (and state) changed, then I could understand the re-render, but as they are the same I am unsure why I'm seeing this behaviour.

I have also checked the network logs and verified only 1 API call is being made to /me:

Given useSuspenseQuery throws to the nearest <Suspense>, I would have expected only 1 console.log for the returned values, and 1 console.log for Rendered AppLayout.

If I change it to use useQuery, and handle the returning of a <Spinner> internally myself within the AuthProvider, then I only see 1 render as I expect:

export function AuthProvider({ children }: { children: ReactNode }) {
    const { data: user, isLoading, isError, status } = useQuery({
        // same params as above
    });

    if (isLoading) {   <-----------------------
        return <CenteredSpinner/>   <----------
    }

    // same as before
}

The only way I can prevent this behaviour is by deliberate adding a setTimeout to the query function:

export function AuthProvider({ children }: { children: ReactNode }) {
    const { data: user, isLoading, isError, status } = useSuspenseQuery({
        queryKey: queryKeys.customer,
        queryFn: async () => {
            try {
                console.log("useSuspenseQuery function called")                
                await new Promise(resolve => setTimeout(resolve, 1000));   <-------                
                return await getCustomerDetails();
            }
            // same as before
}

Then, as you can see from the console, there is only a single render. But I naturally won't be adding deliberate timeouts to my AuthProvider as that is an awful thing to do! But (to me) it illustrates that the cause is likely a timing issue potentially, though I'm not clear on what is causing this.

I do hope I haven't wasted your time asking this, I've tried very hard to figure this out for myself.

Full repository if it helps for context:

• main.tsx: https://github.com/bloveridgerowe/eshop-ui/blob/main/src/main.tsx
• auth-provider.tsx: https://github.com/bloveridgerowe/eshop-ui/blob/main/src/components/utilities/AuthProvider.tsx
• app-layout.tsx: https://github.com/bloveridgerowe/eshop-ui/blob/main/src/layouts/AppLayout.tsx

Thank you for your time.