Merge pull request #10486 from marmelab/fix/useHandleCallback_compatible_StrictMode

Make useHandleCallback compatible with StrictMode

Author: djhi

packages/ra-core/src/auth/useHandleAuthCallback.spec.tsx

@@ -160,4 +160,28 @@ describe('useHandleAuthCallback', () => {
             expect(abort).toHaveBeenCalled();
         });
     });
+
+    it('should only call handleCallback once when the component is rendered', async () => {
+        const handleCallback = jest.spyOn(authProvider, 'handleCallback');
+        render(
+            <React.StrictMode>
+                <TestMemoryRouter initialEntries={['/auth-callback']}>
+                    <AuthContext.Provider value={authProvider}>
+                        <QueryClientProvider client={new QueryClient()}>
+                            <Routes>
+                                <Route path="/" element={<div>Home</div>} />
+                                <Route
+                                    path="/auth-callback"
+                                    element={<TestComponent />}
+                                />
+                            </Routes>
+                        </QueryClientProvider>
+                    </AuthContext.Provider>
+                </TestMemoryRouter>
+            </React.StrictMode>
+        );
+
+        await screen.findByText('Home');
+        expect(handleCallback).toHaveBeenCalledTimes(1);
+    });
 });

packages/ra-core/src/auth/useHandleAuthCallback.ts

@@ -24,15 +24,22 @@ export const useHandleAuthCallback = (
     const nextSearch = locationState && locationState.nextSearch;
     const defaultRedirectUrl = nextPathName ? nextPathName + nextSearch : '/';
     const { onSuccess, onError, onSettled, ...queryOptions } = options ?? {};
+    let handleCallbackPromise: Promise<void> | null;
 
     const queryResult = useQuery({
         queryKey: ['auth', 'handleCallback'],
-        queryFn: ({ signal }) =>
-            authProvider && typeof authProvider.handleCallback === 'function'
-                ? authProvider
-                      .handleCallback({ signal })
-                      .then(result => result ?? null)
-                : Promise.resolve(),
+        queryFn: ({ signal }) => {
+            if (!handleCallbackPromise) {
+                handleCallbackPromise =
+                    authProvider &&
+                    typeof authProvider.handleCallback === 'function'
+                        ? authProvider
+                              .handleCallback({ signal })
+                              .then(result => result ?? null)
+                        : Promise.resolve();
+            }
+            return handleCallbackPromise;
+        },
         retry: false,
         ...queryOptions,
     });