Merge pull request #268 from pzmudzinski/use-callback-function

fix useHttpsCallable causing infinite re-rendering

Author: chrisbianca

functions/useHttpsCallable.ts

@@ -3,15 +3,20 @@ import {
   httpsCallable,
   HttpsCallableResult,
 } from 'firebase/functions';
-import { useMemo, useState } from 'react';
+import { useState, useCallback } from 'react';
 
-export type HttpsCallableHook<RequestData = unknown, ResponseData = unknown> = [
-  (
-    data?: RequestData
-  ) => Promise<HttpsCallableResult<ResponseData> | undefined>,
-  boolean,
-  Error | undefined
-];
+export type HttpsCallableHook<
+  RequestData = unknown,
+  ResponseData = unknown
+> = Readonly<
+  [
+    (
+      data?: RequestData
+    ) => Promise<HttpsCallableResult<ResponseData> | undefined>,
+    boolean,
+    Error | undefined
+  ]
+>;
 
 export default <RequestData = unknown, ResponseData = unknown>(
   functions: Functions,
@@ -20,28 +25,26 @@ export default <RequestData = unknown, ResponseData = unknown>(
   const [error, setError] = useState<Error>();
   const [loading, setLoading] = useState<boolean>(false);
 
-  const callCallable = async (
-    data?: RequestData
-  ): Promise<HttpsCallableResult<ResponseData> | undefined> => {
-    const callable = httpsCallable<RequestData, ResponseData>(functions, name);
-    setLoading(true);
-    setError(undefined);
-    try {
-      return await callable(data);
-    } catch (err) {
-      setError(err as Error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const resArray: HttpsCallableHook<RequestData, ResponseData> = [
-    callCallable,
-    loading,
-    error,
-  ];
-  return useMemo<HttpsCallableHook<RequestData, ResponseData>>(
-    () => resArray,
-    resArray
+  const callCallable = useCallback(
+    async (
+      data?: RequestData
+    ): Promise<HttpsCallableResult<ResponseData> | undefined> => {
+      const callable = httpsCallable<RequestData, ResponseData>(
+        functions,
+        name
+      );
+      setLoading(true);
+      setError(undefined);
+      try {
+        return await callable(data);
+      } catch (err) {
+        setError(err as Error);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [functions, name]
   );
+
+  return [callCallable, loading, error] as const;
 };