Merge pull request #41 from ypresto/memo-data

Add useMemo() for value fetching hooks

Author: chrisbianca

database/useList.ts

@@ -1,5 +1,5 @@
 import { database, FirebaseError } from 'firebase';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { snapshotToData } from './helpers';
 import useListReducer from './helpers/useListReducer';
 import { LoadingHook, useIsEqualRef } from '../util';
@@ -82,14 +82,15 @@ export const useListVals = <T>(
     keyField?: string;
   }
 ): ListValsHook<T> => {
-  const [value, loading, error] = useList(query);
-  return [
-    value
-      ? value.map(snapshot =>
-          snapshotToData(snapshot, options ? options.keyField : undefined)
-        )
-      : undefined,
-    loading,
-    error,
-  ];
+  const [snapshots, loading, error] = useList(query);
+  const values = useMemo(
+    () =>
+      snapshots
+        ? snapshots.map(snapshot =>
+            snapshotToData(snapshot, options ? options.keyField : undefined)
+          )
+        : undefined,
+    [snapshots, options && options.keyField]
+  );
+  return [values, loading, error];
 };

database/useObject.ts

@@ -1,5 +1,5 @@
 import { database, FirebaseError } from 'firebase';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { snapshotToData } from './helpers';
 import { LoadingHook, useIsEqualRef, useLoadingValue } from '../util';
 
@@ -39,12 +39,13 @@ export const useObjectVal = <T>(
     keyField?: string;
   }
 ): ObjectValHook<T> => {
-  const [value, loading, error] = useObject(query);
-  return [
-    value
-      ? snapshotToData(value, options ? options.keyField : undefined)
-      : undefined,
-    loading,
-    error,
-  ];
+  const [snapshot, loading, error] = useObject(query);
+  const value = useMemo(
+    () =>
+      snapshot
+        ? snapshotToData(snapshot, options ? options.keyField : undefined)
+        : undefined,
+    [snapshot, options && options.keyField]
+  );
+  return [value, loading, error];
 };

firestore/useCollection.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';
 
@@ -54,14 +54,15 @@ export const useCollectionData = <T>(
   const snapshotListenOptions = options
     ? options.snapshotListenOptions
     : undefined;
-  const [value, loading, error] = useCollection(query, {
+  const [snapshot, loading, error] = useCollection(query, {
     snapshotListenOptions,
   });
-  return [
-    (value
-      ? value.docs.map(doc => snapshotToData(doc, idField))
-      : undefined) as T[],
-    loading,
-    error,
-  ];
+  const values = useMemo(
+    () =>
+      (snapshot
+        ? snapshot.docs.map(doc => snapshotToData(doc, idField))
+        : undefined) as T[],
+    [snapshot, idField]
+  );
+  return [values, loading, error];
 };

firestore/useDocument.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';
 
@@ -54,12 +54,12 @@ export const useDocumentData = <T>(
   const snapshotListenOptions = options
     ? options.snapshotListenOptions
     : undefined;
-  const [value, loading, error] = useDocument(docRef, {
+  const [snapshot, loading, error] = useDocument(docRef, {
     snapshotListenOptions,
   });
-  return [
-    (value ? snapshotToData(value, idField) : undefined) as T,
-    loading,
-    error,
-  ];
+  const value = useMemo(
+    () => (snapshot ? snapshotToData(snapshot, idField) : undefined) as T,
+    [snapshot, idField]
+  );
+  return [value, loading, error];
 };