Merge pull request #79 from sdemjanenko/memoize_hook_return

Memoize hook return

Author: chrisbianca

auth/useAuthState.ts

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

database/useList.ts

@@ -67,18 +67,31 @@ export const useList = (query?: firebase.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?: firebase.database.Query | null
 ): ListKeysHook => {
-  const [value, loading, error] = useList(query);
-  return [
-    value ? value.map((snapshot) => snapshot.key as string) : undefined,
+  const [snapshots, loading, error] = useList(query);
+  const values = useMemo(
+    () => (snapshots ? snapshots.map(snapshot => snapshot.key as string) : undefined),
+    [snapshots]
+  );
+  const resArray: ListKeysHook = [
+    values,
     loading,
     error,
   ];
+
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };
 
 export const useListVals = <T>(
@@ -97,5 +110,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

@@ -32,7 +32,11 @@ export const useObject = (
     };
   }, [ref.current]);
 
-  return [value, loading, error];
+  const resArray: ObjectHook = [value, loading, error];
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };
 
 export const useObjectVal = <T>(
@@ -49,5 +53,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>(
@@ -54,15 +58,19 @@ 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]
+  return useMemo(
+    () => resArray,
+    resArray,
   );
-  return [values, loading, error];
 };

firestore/useCollectionOnce.ts

@@ -1,5 +1,5 @@
 import firebase from 'firebase/app';
-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 = (
       .catch(setError);
   }, [ref.current]);
 
-  return [value, loading, error];
+  const resArray: CollectionOnceHook = [value, loading, error];
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };
 
 export const useCollectionDataOnce = <T>(
@@ -44,12 +48,20 @@ 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 });
-  return [
-    (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,
   ];
+  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,
+  );
 };

firestore/useDocumentOnce.ts

@@ -1,5 +1,5 @@
 import firebase from 'firebase/app';
-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 = (
       .catch(setError);
   }, [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,
+  );
 };

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,
+    ]
+  );
 };