[storage] Make sure that all internal methods are wrapped with useCallback

Author: chrisbianca

storage/useUploadFile.ts

@@ -6,7 +6,7 @@ import {
   UploadResult,
   UploadTaskSnapshot,
 } from 'firebase/storage';
-import { useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 export type UploadFileHook = [
   (
@@ -24,37 +24,39 @@ export default (): UploadFileHook => {
   const [uploading, setUploading] = useState<boolean>(false);
   const [snapshot, setSnapshot] = useState<UploadTaskSnapshot>();
 
-  const uploadFile = async (
-    storageRef: StorageReference,
-    data: Blob | Uint8Array | ArrayBuffer,
-    metadata?: UploadMetadata | undefined
-  ): Promise<UploadResult | undefined> => {
-    return new Promise((resolve, reject) => {
-      setUploading(true);
-      setError(undefined);
-      const uploadTask = uploadBytesResumable(storageRef, data, metadata);
-      uploadTask.on(
-        'state_changed',
-        (snapshot) => {
-          setSnapshot(snapshot);
-        },
-        (error) => {
-          setUploading(false);
-          setError(error);
-          resolve(undefined);
-        },
-        () => {
-          setUploading(false);
-          setSnapshot(undefined);
-          resolve({
-            metadata: uploadTask.snapshot.metadata,
-            ref: uploadTask.snapshot.ref,
-          });
-        }
-      );
-    });
-  };
+  const uploadFile = useCallback(
+    async (
+      storageRef: StorageReference,
+      data: Blob | Uint8Array | ArrayBuffer,
+      metadata?: UploadMetadata | undefined
+    ): Promise<UploadResult | undefined> => {
+      return new Promise((resolve, reject) => {
+        setUploading(true);
+        setError(undefined);
+        const uploadTask = uploadBytesResumable(storageRef, data, metadata);
+        uploadTask.on(
+          'state_changed',
+          (snapshot) => {
+            setSnapshot(snapshot);
+          },
+          (error) => {
+            setUploading(false);
+            setError(error);
+            resolve(undefined);
+          },
+          () => {
+            setUploading(false);
+            setSnapshot(undefined);
+            resolve({
+              metadata: uploadTask.snapshot.metadata,
+              ref: uploadTask.snapshot.ref,
+            });
+          }
+        );
+      });
+    },
+    []
+  );
 
-  const resArray: UploadFileHook = [uploadFile, uploading, snapshot, error];
-  return useMemo<UploadFileHook>(() => resArray, resArray);
+  return [uploadFile, uploading, snapshot, error];
 };