Merge branch 'master' into useList-efficiency

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
@@ -98,7 +98,8 @@ The `useListVals` hook takes the following parameters:
 
 - `reference`: (optional) `firebase.database.Reference` for the data you would like to load
 - `options`: (optional) `Object` with the following parameters:
-  - `keyField`: (optional) `string` field name that should be populated with the `firebase.firestore.QuerySnapshot.id` property in the returned values
+  - `keyField`: (optional) `string` field name that should be populated with the `firebase.database.DataSnapshot.id` property in the returned values.
+  - `refField`: (optional) `string` field name that should be populated with the `firebase.database.DataSnapshot.ref` property.
 
 Returns:
 
@@ -108,7 +109,7 @@ Returns:
 
 ### useObject
 
-```
+```js
 const [snapshot, loading, error] = useObject(reference);
 ```
 
@@ -146,8 +147,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
@@ -158,6 +159,7 @@ The `useObjectVal` hook takes the following parameters:
 - `reference`: (optional) `firebase.database.Reference` for the data you would like to load
 - `options`: (optional) `Object` with the following parameters:
   - `keyField`: (optional) `string` field name that should be populated with the `firebase.database.DataSnapshot.key` property in the returned value.
+  - `refField`: (optional) `string` field name that should be populated with the `firebase.database.DataSnapshot.ref` property.
 
 Returns:
 

database/helpers/index.ts

@@ -1,11 +1,12 @@
-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,
-  keyField?: string
+  snapshot: firebase.database.DataSnapshot,
+  keyField?: string,
+  refField?: string
 ) => {
   if (!snapshot.exists) {
     return undefined;
@@ -16,6 +17,7 @@ export const snapshotToData = (
     return {
       ...val,
       ...(keyField ? { [keyField]: snapshot.key } : null),
+      ...(refField ? { [refField]: snapshot.ref } : null),
     };
   }
   return val;

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'; snapshots: database.DataSnapshot[] | null };

database/useList.ts

@@ -1,62 +1,65 @@
-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 queryRef = useIsEqualRef(query, () => dispatch({ type: 'reset' }));
 
   useEffect(() => {
-    const ref: database.Query | null | undefined = queryRef.current;
+    const ref: firebase.database.Query | null | undefined = queryRef.current;
     if (!ref) {
       dispatch({ type: 'empty' });
       return;
     }
 
     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 });
     };
 
-    const onValue = (snapshots: database.DataSnapshot[] | null) => {
+    const onValue = (snapshots: firebase.database.DataSnapshot[] | null) => {
       dispatch({ type: 'value', snapshots });
     };
 
     let childAddedHandler: ReturnType<typeof ref.on> | undefined;
-    const children: database.DataSnapshot[] = [];
-    const onInitialLoad = (snapshot: database.DataSnapshot) => {
+    const children: firebase.database.DataSnapshot[] = [];
+    const onInitialLoad = (snapshot: firebase.database.DataSnapshot) => {
       let childrenToProcess = Object.keys(snapshot.val()).length;
 
       const onChildAddedWithoutInitialLoad = (
-        addedChild: database.DataSnapshot,
+        addedChild: firebase.database.DataSnapshot,
         previousKey?: string
       ) => {
         // process the first batch of children all at once
@@ -102,10 +105,11 @@ export const useList = (query?: database.Query | null): ListHook => {
     };
   }, [dispatch, queryRef]);
 
-  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 => {
+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,
@@ -115,20 +119,25 @@ export const useListKeys = (query?: database.Query | null): ListKeysHook => {
 };
 
 export const useListVals = <T>(
-  query?: database.Query | null,
+  query?: firebase.database.Query | null,
   options?: {
     keyField?: string;
+    refField?: string;
   }
 ): ListValsHook<T> => {
+  const keyField = options ? options.keyField : undefined;
+  const refField = options ? options.refField : undefined;
   const [snapshots, loading, error] = useList(query);
   const values = useMemo(
     () =>
       snapshots
         ? snapshots.map((snapshot) =>
-            snapshotToData(snapshot, options ? options.keyField : undefined)
+            snapshotToData(snapshot, options ? options.keyField : undefined, refField)
           )
         : undefined,
     [snapshots, options && options.keyField]
   );
-  return [values, loading, error];
+
+  const resArray: ListValsHook<T> = [values, loading, error];
+  return useMemo(() => resArray, resArray);
 };