fix: defer eager requests in storage, auth, and functions hooks

src/auth.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { user } from 'rxfire/auth';
 import { preloadObservable, ReactFireOptions, useAuth, useObservable, ObservableStatus, ReactFireError } from './';
-import { from, of } from 'rxjs';
+import { from, of, defer } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 import { useSuspenseEnabledFromConfigAndContext } from './firebaseApp';
 
@@ -44,7 +44,9 @@ export function useIdTokenResult(user: User, forceRefresh = false, options?: Rea
   }
 
   const observableId = `auth:idTokenResult:${user.uid}:forceRefresh=${forceRefresh}`;
-  const observable$ = from(user.getIdTokenResult(forceRefresh));
+  // Wrap in `defer` so the token fetch runs lazily on subscription rather than
+  // eagerly on every render.
+  const observable$ = defer(() => from(user.getIdTokenResult(forceRefresh)));
 
   return useObservable(observableId, observable$, options);
 }

src/functions.tsx

@@ -1,4 +1,5 @@
 import { httpsCallable as rxHttpsCallable } from 'rxfire/functions';
+import { defer } from 'rxjs';
 import { ReactFireOptions, useObservable, ObservableStatus } from './';
 import { useFunctions } from '.';
 
@@ -20,7 +21,9 @@ export function useCallableFunctionResponse<RequestData, ResponseData>(
   const functions = useFunctions();
   const observableId = `functions:callableResponse:${functionName}:${JSON.stringify(options?.data)}:${JSON.stringify(options?.httpsCallableOptions)}`;
   const obsFactory = rxHttpsCallable<RequestData, ResponseData>(functions, functionName, options?.httpsCallableOptions);
-  const observable$ = obsFactory(options?.data);
+  // Wrap in `defer` so the function is invoked lazily on subscription rather than
+  // on every render (each render otherwise calls the cloud function and discards it).
+  const observable$ = defer(() => obsFactory(options?.data));
 
   return useObservable(observableId, observable$, options);
 }

src/storage.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { getDownloadURL, fromTask } from 'rxfire/storage';
+import { defer } from 'rxjs';
 import { ReactFireOptions, useObservable, ObservableStatus, useStorage } from './';
 import { useSuspenseEnabledFromConfigAndContext } from './firebaseApp';
 import { ref } from 'firebase/storage';
@@ -28,7 +29,10 @@ export function useStorageTask<T = unknown>(task: UploadTask, ref: StorageRefere
  */
 export function useStorageDownloadURL<T = string>(ref: StorageReference, options?: ReactFireOptions<T>): ObservableStatus<string | T> {
   const observableId = `storage:downloadUrl:${ref.toString()}`;
-  const observable$ = getDownloadURL(ref);
+  // Wrap in `defer` so the download URL request is created lazily on subscription
+  // rather than eagerly on every render (which fires a discarded request each time,
+  // and an unhandled rejection when the object is missing).
+  const observable$ = defer(() => getDownloadURL(ref));
 
   return useObservable(observableId, observable$, options);
 }

test/auth.test.tsx

@@ -9,14 +9,15 @@ import {
   AuthProvider,
   useUser,
   useSigninCheck,
+  useIdTokenResult,
   ClaimCheckErrors,
   ClaimsValidator,
 } from '../src/index';
 import { baseConfig } from './appConfig';
 import { FirebaseApp, initializeApp } from 'firebase/app';
 import { randomString } from './test-utils';
 
-import { getAuth, GoogleAuthProvider, signInWithCredential, signInWithCustomToken, signOut, connectAuthEmulator, UserCredential } from 'firebase/auth';
+import { getAuth, GoogleAuthProvider, signInWithCredential, signInWithCustomToken, signOut, connectAuthEmulator, UserCredential, User } from 'firebase/auth';
 
 describe('Authentication', () => {
   let app: FirebaseApp;
@@ -388,4 +389,22 @@ describe('Authentication', () => {
       await findByTestId('signed-out');
     });
   });
+
+  describe('useIdTokenResult', () => {
+    it('defers the token fetch so it does not re-run on every render', async () => {
+      const getIdTokenResult = vi.fn().mockResolvedValue({ claims: {} });
+      const fakeUser = { uid: randomString(), getIdTokenResult } as unknown as User;
+
+      const { result, rerender } = renderHook(() => useIdTokenResult(fakeUser, false));
+
+      await waitFor(() => expect(result.current.status).toEqual('success'));
+
+      // The request is created lazily inside `defer` and useObservable subscribes
+      // once, so re-rendering must not trigger additional token fetches.
+      rerender();
+      rerender();
+
+      expect(getIdTokenResult).toHaveBeenCalledTimes(1);
+    });
+  });
 });