Return memorized arrays from hooks

This fixes an issue where a user may end up getting a new array with the
same entries from these hooks.

This was an issue if a user wrote code like:
```
const queryResults = useCollection(...)
```

Every time the component rendered, `useCollection` would return a new
Array, even if none of the memoized value/error/loading state had
changed.

Author: sdemjanenko

auth/useAuthState.ts

@@ -1,5 +1,5 @@
 import { auth, User } from 'firebase';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { LoadingHook, useLoadingValue } from '../util';
 
 export type AuthStateHook = LoadingHook<User, auth.Error>;
@@ -21,5 +21,9 @@ export default (auth: auth.Auth): AuthStateHook => {
     [auth]
   );
 
-  return [value, loading, error];
+  const resArray:AuthStateHook = [value, loading, error]
+  return useMemo<AuthStateHook>(
+    () => resArray,
+    resArray,
+  );
 };

database/useList.ts

@@ -64,16 +64,25 @@ export const useList = (query?: database.Query | null): ListHook => {
     };
   }, [ref.current]);
 
-  return [state.value.values, state.loading, state.error];
+  const resArray: ListHook = [state.value.values, state.loading, state.error];
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };
 
 export const useListKeys = (query?: database.Query | null): ListKeysHook => {
   const [value, loading, error] = useList(query);
-  return [
+  const resArray: ListKeysHook = [
     value ? value.map(snapshot => snapshot.key as string) : undefined,
     loading,
     error,
   ];
+
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };
 
 export const useListVals = <T>(
@@ -92,5 +101,10 @@ export const useListVals = <T>(
         : undefined,
     [snapshots, options && options.keyField]
   );
-  return [values, loading, error];
+
+  const resArray: ListValsHook<T> = [values, loading, error];
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };

database/useObject.ts

@@ -30,7 +30,11 @@ export const useObject = (query?: database.Query | null): ObjectHook => {
     [ref.current]
   );
 
-  return [value, loading, error];
+  const resArray: ObjectHook = [value, loading, error];
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };
 
 export const useObjectVal = <T>(
@@ -47,5 +51,10 @@ export const useObjectVal = <T>(
         : undefined,
     [snapshot, options && options.keyField]
   );
-  return [value, loading, error];
+
+  const resArray: ObjectValHook<T> = [value, loading, error];
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };

firestore/useCollection.ts

@@ -40,7 +40,11 @@ export const useCollection = (
     [ref.current]
   );
 
-  return [value, loading, error];
+  const resArray: CollectionHook = [value, loading, error];
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };
 
 export const useCollectionData = <T>(
@@ -64,5 +68,10 @@ export const useCollectionData = <T>(
         : undefined) as T[],
     [snapshot, idField]
   );
-  return [values, loading, error];
+
+  const resArray: CollectionDataHook<T> = [values, loading, error]
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };

firestore/useCollectionOnce.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 useCollectionOnce = (
     [ref.current]
   );
 
-  return [value, loading, error];
+  const resArray: CollectionOnceHook = [value, loading, error];
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };
 
 export const useCollectionDataOnce = <T>(
@@ -45,11 +49,15 @@ export const useCollectionDataOnce = <T>(
   const idField = options ? options.idField : undefined;
   const getOptions = options ? options.getOptions : undefined;
   const [value, loading, error] = useCollectionOnce(query, { getOptions });
-  return [
+  const resArray: CollectionDataOnceHook<T> = [
     (value
       ? value.docs.map(doc => snapshotToData(doc, idField))
       : undefined) as T[],
     loading,
     error,
   ];
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };

firestore/useDocument.ts

@@ -40,7 +40,11 @@ export const useDocument = (
     [ref.current]
   );
 
-  return [value, loading, error];
+  const resArray: DocumentHook = [value, loading, error];
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };
 
 export const useDocumentData = <T>(
@@ -61,5 +65,10 @@ export const useDocumentData = <T>(
     () => (snapshot ? snapshotToData(snapshot, idField) : undefined) as T,
     [snapshot, idField]
   );
-  return [value, loading, error];
+
+  const resArray: DocumentDataHook<T> = [value, loading, error];
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };

util/useLoadingValue.ts

@@ -1,4 +1,4 @@
-import { useReducer } from 'react';
+import { useMemo, useReducer } from 'react';
 
 export type LoadingValue<T, E> = {
   error?: E;
@@ -73,12 +73,21 @@ export default <T, E>(getDefaultValue?: () => T | null): LoadingValue<T, E> => {
     dispatch({ type: 'value', value });
   };
 
-  return {
-    error: state.error,
-    loading: state.loading,
-    reset,
-    setError,
-    setValue,
-    value: state.value,
-  };
+  return useMemo(
+    () => ({
+      error: state.error,
+      loading: state.loading,
+      reset,
+      setError,
+      setValue,
+      value: state.value,
+    }), [
+      state.error,
+      state.loading,
+      reset,
+      setError,
+      setValue,
+      state.value,
+    ]
+  );
 };