Multiple function calls when using custom hook useCallableFunctionResponse

### Short description
Using the `useCallableFunctionResponse` hook from `reactfire` causes the function to be called twice.
This might lead to undesired costs.

### Version info



**React:** "^18"
**Firebase:** "^10.0.0"
**ReactFire:** "^4.2.3"
**Next:** "14.1.0"
**Node:** "^20"

### Test case



Content of `app/layout.tsx`:
```typescript
    "use client"
    
    import { Inter } from "next/font/google";
    import "./globals.css";
    import {FirebaseAppProvider} from "reactfire";
    
    const inter = Inter({ subsets: ["latin"] });
    
    const firebaseConfig = {
      // your firebase config
    };
    
    export default function RootLayout({
      children,
    }: Readonly<{
      children: React.ReactNode;
    }>) {
      return (
        <html lang="en">
          <FirebaseAppProvider firebaseConfig={firebaseConfig}>
            <body className={inter.className}>{children}</body>
          </FirebaseAppProvider>
        </html>
      );
    }
```

Content of `app/page.tsx`:
```typescript
    "use client"
    
    import {FunctionsProvider, useCallableFunctionResponse, useFirebaseApp} from "reactfire";
    import {getFunctions} from "@firebase/functions";
    import Test from "@/app/test";
    
    const FUNCTIONS_REGION = 'your region';
    
    export default function Home() {
      const firebaseApp = useFirebaseApp(); 
      const functions = getFunctions(firebaseApp, FUNCTIONS_REGION);
    
      return (
        <FunctionsProvider sdk={functions}>
            <main className="flex min-h-screen flex-col items-center justify-between p-24">
              <Test /> 
            </main>
        </FunctionsProvider>
      );
    }
```

Content of `app/test.tsx`:
```typescript
    import {useCallableFunctionResponse} from "reactfire";

    export default function Test() {
      const responseObservable = useCallableFunctionResponse<any, string>('your_callable_function', {data: {}});
    
      return (
        <div>
          {
            responseObservable.status === 'loading' ?
              <p>Loading ...</p> :
              <p>{responseObservable.data}</p>
          }
        </div>
      );
    }
```

### Steps to reproduce


- Run app (possible with `npm run dev`)
- Open app in browser
- In `Firebase console` -> `Functions` select `your_callable_function` and open the `Detailed usage stats` using the 3 dot menu.
This will open the `Google Cloud Console` -> `Function details` page for the function.
- Select the `Logs` tab and wait for the logs to load.
- Check how many times the function was called when you refreshed the browser page.

### Expected behavior


The function should be called once.
```
202x-xx-xx xx:xx:xx.731 xxx | POST 200 xxx B x ms xxxxxx  https://region-project.cloudfunctions.net/your_callable_function 
```

### Actual behavior


The function is actually called twice.
```
202x-xx-xx xx:xx:xx.731 xxx | POST 200 xxx B x ms xxxxxx  https://region-project.cloudfunctions.net/your_callable_function
202x-xx-xx xx:xx:xx.798 xxx | POST 200 xxx B x ms xxxxxx  https://region-project.cloudfunctions.net/your_callable_function  
```

### Workaround
Using the `httpsCallable` from `firebase/functions` combined with the native hooks `useEffect` and `useState` solves the issue.

Content of `app/test.tsx`:
```typescript
    import {useFunctions} from "reactfire";
    import {httpsCallable} from "firebase/functions";
    import {useEffect, useState} from "react";
    
    export default function Test() {
      const functions = useFunctions();
      const dataReader = httpsCallable<object, string>(functions, 'your_callable_function');
    
      const [responseObservable, setResponseObservable] =
        useState<{status: string, data: string}>({status: 'loading', data: ''});
    
      useEffect(() => {
        dataReader({})
          .then((result) => {
            setResponseObservable({status: 'success', data: result.data});
          })
          .catch((error) => {
            setResponseObservable({status: 'error', data: error});
          });
      }, []);
    
      return (
        <div>
          {
            responseObservable.status === 'loading' ?
              <p>Loading ...</p> :
              <p>{responseObservable.data}</p>
          }
        </div>
      );
    }
```

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!