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

Author: chrisbianca

firestore/README.md

@@ -111,6 +111,7 @@ Returns:
 - `snapshot`: a `firestore.QuerySnapshot`, or `undefined` if no query is supplied
 - `loading`: a `boolean` to indicate if the data is still being loaded
 - `error`: Any `firestore.FirestoreError` returned by Firebase when trying to load the data, or `undefined` if there is no error
+- `reload()`: a function that can be called to trigger a reload of the data
 
 ### useCollectionData
 
@@ -163,6 +164,7 @@ Returns:
 - `loading`: a `boolean` to indicate if the data is still being loaded
 - `error`: Any `firestore.FirestoreError` returned by Firebase when trying to load the data, or `undefined` if there is no error
 - `snapshot`: a `firestore.QuerySnapshot`, or `undefined` if no query is supplied. This allows access to the underlying snapshot if needed for any reason, e.g. to view the snapshot metadata
+- `reload()`: a function that can be called to trigger a reload of the data
 
 See [Transforming data](#transforming-data) for how to transform data as it leaves Firestore and access the underlying `id` and `ref` fields of the snapshot.
 

firestore/useCollection.ts

@@ -9,7 +9,7 @@ import {
   QuerySnapshot,
   SnapshotOptions,
 } from 'firebase/firestore';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useLoadingValue } from '../util';
 import { useIsFirestoreQueryEqual } from './helpers';
 import {
@@ -54,12 +54,7 @@ export const useCollection = <T = DocumentData>(
     };
   }, [ref.current]);
 
-  const resArray: CollectionHook<T> = [
-    value as QuerySnapshot<T>,
-    loading,
-    error,
-  ];
-  return useMemo(() => resArray, resArray);
+  return [value as QuerySnapshot<T>, loading, error];
 };
 
 export const useCollectionOnce = <T = DocumentData>(
@@ -73,27 +68,32 @@ export const useCollectionOnce = <T = DocumentData>(
   let effectActive = true;
   const ref = useIsFirestoreQueryEqual<Query<T>>(query, reset);
 
-  const loadData = async (
-    query?: Query<T> | null,
-    options?: Options & OnceOptions
-  ) => {
-    if (!query) {
-      setValue(undefined);
-      return;
-    }
-    const get = getDocsFnFromGetOptions(options?.getOptions);
-
-    try {
-      const result = await get(query);
-      if (effectActive) {
-        setValue(result);
+  const loadData = useCallback(
+    async (query?: Query<T> | null, options?: Options & OnceOptions) => {
+      if (!query) {
+        setValue(undefined);
+        return;
       }
-    } catch (error) {
-      if (effectActive) {
-        setError(error as FirestoreError);
+      const get = getDocsFnFromGetOptions(options?.getOptions);
+
+      try {
+        const result = await get(query);
+        if (effectActive) {
+          setValue(result);
+        }
+      } catch (error) {
+        if (effectActive) {
+          setError(error as FirestoreError);
+        }
       }
-    }
-  };
+    },
+    []
+  );
+
+  const reloadData = useCallback(() => loadData(ref.current, options), [
+    loadData,
+    ref.current,
+  ]);
 
   useEffect(() => {
     loadData(ref.current, options);
@@ -103,58 +103,40 @@ export const useCollectionOnce = <T = DocumentData>(
     };
   }, [ref.current]);
 
-  const resArray: CollectionOnceHook<T> = [
-    value as QuerySnapshot<T>,
-    loading,
-    error,
-    () => loadData(ref.current, options),
-  ];
-  return useMemo(() => resArray, resArray);
+  return [value as QuerySnapshot<T>, loading, error, reloadData];
 };
 
 export const useCollectionData = <T = DocumentData>(
   query?: Query<T> | null,
   options?: DataOptions<T> & InitialValueOptions<T[]>
 ): CollectionDataHook<T> => {
-  const snapshotOptions = options?.snapshotOptions;
   const [snapshots, loading, error] = useCollection<T>(query, options);
 
-  const initialValue = options?.initialValue;
   const values = getValuesFromSnapshots<T>(
     snapshots,
-    snapshotOptions,
-    initialValue
+    options?.snapshotOptions,
+    options?.initialValue
   );
 
-  const resArray: CollectionDataHook<T> = [values, loading, error, snapshots];
-  return useMemo(() => resArray, resArray);
+  return [values, loading, error, snapshots];
 };
 
 export const useCollectionDataOnce = <T = DocumentData>(
   query?: Query<T> | null,
   options?: OnceDataOptions<T> & InitialValueOptions<T[]>
 ): CollectionDataOnceHook<T> => {
-  const snapshotOptions = options?.snapshotOptions;
-  const [snapshots, loading, error, loadData] = useCollectionOnce<T>(
+  const [snapshots, loading, error, reloadData] = useCollectionOnce<T>(
     query,
     options
   );
 
-  const initialValue = options?.initialValue;
   const values = getValuesFromSnapshots<T>(
     snapshots,
-    snapshotOptions,
-    initialValue
+    options?.snapshotOptions,
+    options?.initialValue
   );
 
-  const resArray: CollectionDataOnceHook<T> = [
-    values,
-    loading,
-    error,
-    snapshots,
-    loadData,
-  ];
-  return useMemo(() => resArray, resArray);
+  return [values, loading, error, snapshots, reloadData];
 };
 
 const getValuesFromSnapshots = <T>(

firestore/useDocument.ts

@@ -9,7 +9,7 @@ import {
   onSnapshot,
   SnapshotOptions,
 } from 'firebase/firestore';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useLoadingValue } from '../util';
 import { useIsFirestoreRefEqual } from './helpers';
 import {
@@ -54,12 +54,7 @@ export const useDocument = <T = DocumentData>(
     };
   }, [ref.current]);
 
-  const resArray: DocumentHook<T> = [
-    value as DocumentSnapshot<T>,
-    loading,
-    error,
-  ];
-  return useMemo(() => resArray, resArray);
+  return [value as DocumentSnapshot<T>, loading, error];
 };
 
 export const useDocumentOnce = <T = DocumentData>(
@@ -73,27 +68,32 @@ export const useDocumentOnce = <T = DocumentData>(
   let effectActive = true;
   const ref = useIsFirestoreRefEqual<DocumentReference<T>>(docRef, reset);
 
-  const loadData = async (
-    reference?: DocumentReference<T> | null,
-    options?: OnceOptions
-  ) => {
-    if (!reference) {
-      setValue(undefined);
-      return;
-    }
-    const get = getDocFnFromGetOptions(options?.getOptions);
-
-    try {
-      const result = await get(reference);
-      if (effectActive) {
-        setValue(result);
+  const loadData = useCallback(
+    async (reference?: DocumentReference<T> | null, options?: OnceOptions) => {
+      if (!reference) {
+        setValue(undefined);
+        return;
       }
-    } catch (error) {
-      if (effectActive) {
-        setError(error as FirestoreError);
+      const get = getDocFnFromGetOptions(options?.getOptions);
+
+      try {
+        const result = await get(reference);
+        if (effectActive) {
+          setValue(result);
+        }
+      } catch (error) {
+        if (effectActive) {
+          setError(error as FirestoreError);
+        }
       }
-    }
-  };
+    },
+    []
+  );
+
+  const reloadData = useCallback(() => loadData(ref.current, options), [
+    loadData,
+    ref.current,
+  ]);
 
   useEffect(() => {
     if (!ref.current) {
@@ -108,13 +108,7 @@ export const useDocumentOnce = <T = DocumentData>(
     };
   }, [ref.current]);
 
-  const resArray: DocumentOnceHook<T> = [
-    value as DocumentSnapshot<T>,
-    loading,
-    error,
-    () => loadData(ref.current, options),
-  ];
-  return useMemo(() => resArray, resArray);
+  return [value as DocumentSnapshot<T>, loading, error, reloadData];
 };
 
 export const useDocumentData = <T = DocumentData>(
@@ -129,15 +123,14 @@ export const useDocumentData = <T = DocumentData>(
     options?.initialValue
   );
 
-  const resArray: DocumentDataHook<T> = [value, loading, error, snapshot];
-  return useMemo(() => resArray, resArray);
+  return [value, loading, error, snapshot];
 };
 
 export const useDocumentDataOnce = <T = DocumentData>(
   docRef?: DocumentReference<T> | null,
   options?: OnceDataOptions<T> & InitialValueOptions<T>
 ): DocumentDataOnceHook<T> => {
-  const [snapshot, loading, error, loadData] = useDocumentOnce<T>(
+  const [snapshot, loading, error, reloadData] = useDocumentOnce<T>(
     docRef,
     options
   );
@@ -148,14 +141,7 @@ export const useDocumentDataOnce = <T = DocumentData>(
     options?.initialValue
   );
 
-  const resArray: DocumentDataOnceHook<T> = [
-    value,
-    loading,
-    error,
-    snapshot,
-    loadData,
-  ];
-  return useMemo(() => resArray, resArray);
+  return [value, loading, error, snapshot, reloadData];
 };
 
 const getDocFnFromGetOptions = (