Merge branch 'master' into feature/hydrate-reference

Author: chrisbianca

auth/README.md

@@ -4,7 +4,7 @@ React Firebase Hooks provides a convenience listener for Firebase Auth's auth st
 
 All hooks can be imported from `react-firebase-hooks/auth`, e.g.
 
-```
+```js
 import { useAuthState } from 'react-firebase-hooks/auth';
 ```
 
@@ -14,7 +14,7 @@ List of Auth hooks:
 
 ### useAuthState
 
-```
+```js
 const [user, loading, error] = useAuthState(auth);
 ```
 

auth/useAuthState.ts

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

database/README.md

@@ -8,7 +8,7 @@ to give a complete lifecycle for loading and listening to the Realtime Database.
 
 All hooks can be imported from `react-firebase-hooks/database`, e.g.
 
-```
+```js
 import { useList } from 'react-firebase-hooks/database';
 ```
 
@@ -22,7 +22,7 @@ List of Realtime Database hooks:
 
 ### useList
 
-```
+```js
 const [snapshots, loading, error] = useList(reference);
 ```
 
@@ -69,7 +69,7 @@ const DatabaseList = () => {
 
 ### useListKeys
 
-```
+```js
 const [keys, loading, error] = useListKeys(reference);
 ```
 
@@ -87,8 +87,8 @@ Returns:
 
 ### useListVals
 
-```
-const [values, loading, error] = useListVals<T>(reference, options);
+```js
+const [values, loading, error] = useListVals < T > (reference, options);
 ```
 
 As `useList`, but this hook extracts a typed list of the `firebase.database.DataSnapshot.val()` values, rather than the the
@@ -108,7 +108,7 @@ Returns:
 
 ### useObject
 
-```
+```js
 const [snapshot, loading, error] = useObject(reference);
 ```
 
@@ -146,8 +146,8 @@ const DatabaseValue = () => {
 
 ### useObjectVal
 
-```
-const [value, loading, error] = useObjectVal<T>(reference, options);
+```js
+const [value, loading, error] = useObjectVal < T > (reference, options);
 ```
 
 As `useObject`, but this hook returns the typed contents of `firebase.database.DataSnapshot.val()`, rather than the the

database/helpers/index.ts

@@ -1,10 +1,10 @@
-import { database } from 'firebase';
+import firebase from 'firebase/app';
 
 const isObject = (val: any) =>
   val != null && typeof val === 'object' && Array.isArray(val) === false;
 
 export const snapshotToData = (
-  snapshot: database.DataSnapshot,
+  snapshot: firebase.database.DataSnapshot,
   keyField?: string
 ) => {
   if (!snapshot.exists) {

database/helpers/useListReducer.ts

@@ -1,36 +1,36 @@
-import { database, FirebaseError } from 'firebase';
+import firebase from 'firebase/app';
 import { useReducer } from 'react';
 
 type KeyValueState = {
   keys?: string[];
-  values?: database.DataSnapshot[];
+  values?: firebase.database.DataSnapshot[];
 };
 
 type ReducerState = {
-  error?: FirebaseError;
+  error?: firebase.FirebaseError;
   loading: boolean;
   value: KeyValueState;
 };
 
 type AddAction = {
   type: 'add';
   previousKey?: string | null;
-  snapshot: database.DataSnapshot | null;
+  snapshot: firebase.database.DataSnapshot | null;
 };
 type ChangeAction = {
   type: 'change';
-  snapshot: database.DataSnapshot | null;
+  snapshot: firebase.database.DataSnapshot | null;
 };
 type EmptyAction = { type: 'empty' };
-type ErrorAction = { type: 'error'; error: FirebaseError };
+type ErrorAction = { type: 'error'; error: firebase.FirebaseError };
 type MoveAction = {
   type: 'move';
   previousKey?: string | null;
-  snapshot: database.DataSnapshot | null;
+  snapshot: firebase.database.DataSnapshot | null;
 };
 type RemoveAction = {
   type: 'remove';
-  snapshot: database.DataSnapshot | null;
+  snapshot: firebase.database.DataSnapshot | null;
 };
 type ResetAction = { type: 'reset' };
 type ValueAction = { type: 'value' };

database/useList.ts

@@ -1,41 +1,44 @@
-import { database, FirebaseError } from 'firebase';
+import firebase from 'firebase/app';
 import { useEffect, useMemo } from 'react';
 import { snapshotToData } from './helpers';
 import useListReducer from './helpers/useListReducer';
 import { LoadingHook, useIsEqualRef } from '../util';
 
-export type ListHook = LoadingHook<database.DataSnapshot[], FirebaseError>;
-export type ListKeysHook = LoadingHook<string[], FirebaseError>;
-export type ListValsHook<T> = LoadingHook<T[], FirebaseError>;
+export type ListHook = LoadingHook<
+  firebase.database.DataSnapshot[],
+  firebase.FirebaseError
+>;
+export type ListKeysHook = LoadingHook<string[], firebase.FirebaseError>;
+export type ListValsHook<T> = LoadingHook<T[], firebase.FirebaseError>;
 
-export const useList = (query?: database.Query | null): ListHook => {
+export const useList = (query?: firebase.database.Query | null): ListHook => {
   const [state, dispatch] = useListReducer();
 
   const ref = useIsEqualRef(query, () => dispatch({ type: 'reset' }));
 
   const onChildAdded = (
-    snapshot: database.DataSnapshot | null,
+    snapshot: firebase.database.DataSnapshot | null,
     previousKey?: string | null
   ) => {
     dispatch({ type: 'add', previousKey, snapshot });
   };
 
-  const onChildChanged = (snapshot: database.DataSnapshot | null) => {
+  const onChildChanged = (snapshot: firebase.database.DataSnapshot | null) => {
     dispatch({ type: 'change', snapshot });
   };
 
   const onChildMoved = (
-    snapshot: database.DataSnapshot | null,
+    snapshot: firebase.database.DataSnapshot | null,
     previousKey?: string | null
   ) => {
     dispatch({ type: 'move', previousKey, snapshot });
   };
 
-  const onChildRemoved = (snapshot: database.DataSnapshot | null) => {
+  const onChildRemoved = (snapshot: firebase.database.DataSnapshot | null) => {
     dispatch({ type: 'remove', snapshot });
   };
 
-  const onError = (error: FirebaseError) => {
+  const onError = (error: firebase.FirebaseError) => {
     dispatch({ type: 'error', error });
   };
 
@@ -44,7 +47,7 @@ export const useList = (query?: database.Query | null): ListHook => {
   };
 
   useEffect(() => {
-    const query: database.Query | null | undefined = ref.current;
+    const query: firebase.database.Query | null | undefined = ref.current;
     if (!query) {
       dispatch({ type: 'empty' });
       return;
@@ -64,20 +67,35 @@ 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 [
-    value ? value.map(snapshot => snapshot.key as string) : undefined,
+export const useListKeys = (
+  query?: firebase.database.Query | null
+): ListKeysHook => {
+  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>(
-  query?: database.Query | null,
+  query?: firebase.database.Query | null,
   options?: {
     keyField?: string;
   }
@@ -86,11 +104,16 @@ export const useListVals = <T>(
   const values = useMemo(
     () =>
       snapshots
-        ? snapshots.map(snapshot =>
+        ? snapshots.map((snapshot) =>
             snapshotToData(snapshot, options ? options.keyField : undefined)
           )
         : undefined,
     [snapshots, options && options.keyField]
   );
-  return [values, loading, error];
+
+  const resArray: ListValsHook<T> = [values, loading, error];
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };

database/useObject.ts

@@ -1,40 +1,46 @@
-import { database, FirebaseError } from 'firebase';
+import firebase from 'firebase/app';
 import { useEffect, useMemo } from 'react';
 import { snapshotToData } from './helpers';
 import { LoadingHook, useIsEqualRef, useLoadingValue } from '../util';
 
-export type ObjectHook = LoadingHook<database.DataSnapshot, FirebaseError>;
-export type ObjectValHook<T> = LoadingHook<T, FirebaseError>;
+export type ObjectHook = LoadingHook<
+  firebase.database.DataSnapshot,
+  firebase.FirebaseError
+>;
+export type ObjectValHook<T> = LoadingHook<T, firebase.FirebaseError>;
 
-export const useObject = (query?: database.Query | null): ObjectHook => {
+export const useObject = (
+  query?: firebase.database.Query | null
+): ObjectHook => {
   const { error, loading, reset, setError, setValue, value } = useLoadingValue<
-    database.DataSnapshot,
-    FirebaseError
+    firebase.database.DataSnapshot,
+    firebase.FirebaseError
   >();
   const ref = useIsEqualRef(query, reset);
 
-  useEffect(
-    () => {
-      const query = ref.current;
-      if (!query) {
-        setValue(undefined);
-        return;
-      }
-
-      query.on('value', setValue, setError);
-
-      return () => {
-        query.off('value', setValue);
-      };
-    },
-    [ref.current]
-  );
+  useEffect(() => {
+    const query = ref.current;
+    if (!query) {
+      setValue(undefined);
+      return;
+    }
+
+    query.on('value', setValue, setError);
+
+    return () => {
+      query.off('value', setValue);
+    };
+  }, [ref.current]);
 
-  return [value, loading, error];
+  const resArray: ObjectHook = [value, loading, error];
+  return useMemo(
+    () => resArray,
+    resArray,
+  );
 };
 
 export const useObjectVal = <T>(
-  query?: database.Query | null,
+  query?: firebase.database.Query | null,
   options?: {
     keyField?: string;
   }
@@ -47,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,
+  );
 };