Memoize useListKeys', useCollectionOnce's, useDocumentDataOnce's value

This hook should only return a new array of keys if the snapshots
change. Previously, a new array was being returned every render cycle.

Author: sdemjanenko

database/useList.ts

@@ -72,9 +72,13 @@ export const useList = (query?: database.Query | null): ListHook => {
 };
 
 export const useListKeys = (query?: database.Query | null): ListKeysHook => {
-  const [value, loading, error] = useList(query);
+  const [snapshots, loading, error] = useList(query);
+  const values = useMemo(
+    () => (snapshots ? snapshots.map(snapshot => snapshot.key as string) : undefined),
+    [snapshots]
+  );
   const resArray: ListKeysHook = [
-    value ? value.map(snapshot => snapshot.key as string) : undefined,
+    values,
     loading,
     error,
   ];

firestore/useCollection.ts

@@ -58,15 +58,14 @@ export const useCollectionData = <T>(
   const snapshotListenOptions = options
     ? options.snapshotListenOptions
     : undefined;
-  const [snapshot, loading, error] = useCollection(query, {
+  const [snapshots, loading, error] = useCollection(query, {
     snapshotListenOptions,
   });
   const values = useMemo(
-    () =>
-      (snapshot
-        ? snapshot.docs.map(doc => snapshotToData(doc, idField))
-        : undefined) as T[],
-    [snapshot, idField]
+    () => (snapshots
+      ? snapshots.docs.map(doc => snapshotToData(doc, idField))
+      : undefined) as T[],
+    [snapshots, idField]
   );
 
   const resArray: CollectionDataHook<T> = [values, loading, error]

firestore/useCollectionOnce.ts

@@ -48,11 +48,15 @@ export const useCollectionDataOnce = <T>(
 ): CollectionDataOnceHook<T> => {
   const idField = options ? options.idField : undefined;
   const getOptions = options ? options.getOptions : undefined;
-  const [value, loading, error] = useCollectionOnce(query, { getOptions });
-  const resArray: CollectionDataOnceHook<T> = [
-    (value
-      ? value.docs.map(doc => snapshotToData(doc, idField))
+  const [snapshots, loading, error] = useCollectionOnce(query, { getOptions });
+  const values = useMemo(
+    () => (snapshots
+      ? snapshots.docs.map(doc => snapshotToData(doc, idField))
       : undefined) as T[],
+    [snapshots, idField]
+  );
+  const resArray: CollectionDataOnceHook<T> = [
+    values,
     loading,
     error,
   ];

firestore/useDocumentOnce.ts

@@ -1,5 +1,5 @@
 import { firestore } from 'firebase';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { snapshotToData } from './helpers';
 import { LoadingHook, useIsEqualRef, useLoadingValue } from '../util';
 
@@ -32,7 +32,11 @@ export const useDocumentOnce = (
     [ref.current]
   );
 
-  return [value, loading, error];
+  const resArray: DocumentOnceHook = [value, loading, error]
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };
 
 export const useDocumentDataOnce = <T>(
@@ -44,10 +48,15 @@ export const useDocumentDataOnce = <T>(
 ): DocumentDataOnceHook<T> => {
   const idField = options ? options.idField : undefined;
   const getOptions = options ? options.getOptions : undefined;
-  const [value, loading, error] = useDocumentOnce(docRef, { getOptions });
-  return [
-    (value ? snapshotToData(value, idField) : undefined) as T,
-    loading,
-    error,
-  ];
+  const [snapshot, loading, error] = useDocumentOnce(docRef, { getOptions });
+  const value = useMemo(
+    () => (snapshot ? snapshotToData(snapshot, idField) : undefined) as T,
+    [snapshot, idField]
+  );
+
+  const resArray: DocumentDataOnceHook<T> = [value, loading, error]
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };