Prevent excessive rerenders with useList

Use the `.once`’s `val()` to determine the number of children, then batch that many calls to the `child_added` handler into one `value` dispatch, resulting in one additional render instead of one per child.
Fix shadowing of `query` variable, use `ref` instead.
Fix the `ref.off` calls to pass the right function to unsubscribe.
Fix dependencies on useEffect.
Fixes #74

Author: caleb-harrelson

database/helpers/useListReducer.ts

@@ -33,7 +33,7 @@ type RemoveAction = {
   snapshot: database.DataSnapshot | null;
 };
 type ResetAction = { type: 'reset' };
-type ValueAction = { type: 'value' };
+type ValueAction = { type: 'value'; snapshots: database.DataSnapshot[] | null };
 type ReducerAction =
   | AddAction
   | ChangeAction
@@ -110,6 +110,7 @@ const listReducer = (
         ...state,
         error: undefined,
         loading: false,
+        value: setValue(action.snapshots),
       };
     case 'empty':
       return {
@@ -125,6 +126,30 @@ const listReducer = (
   }
 };
 
+const setValue = (snapshots: database.DataSnapshot[] | null): KeyValueState => {
+  if (!snapshots) {
+    return {
+      keys: [],
+      values: [],
+    };
+  }
+
+  const keys: string[] = [];
+  const values: database.DataSnapshot[] = [];
+  snapshots.forEach((snapshot) => {
+    if (!snapshot.key) {
+      return;
+    }
+    keys.push(snapshot.key);
+    values.push(snapshot);
+  });
+
+  return {
+    keys,
+    values,
+  };
+};
+
 const addChild = (
   currentState: KeyValueState,
   snapshot: database.DataSnapshot,

database/useList.ts

@@ -11,66 +11,104 @@ export type ListValsHook<T> = LoadingHook<T[], FirebaseError>;
 export const useList = (query?: database.Query | null): ListHook => {
   const [state, dispatch] = useListReducer();
 
-  const ref = useIsEqualRef(query, () => dispatch({ type: 'reset' }));
-
-  const onChildAdded = (
-    snapshot: database.DataSnapshot | null,
-    previousKey?: string | null
-  ) => {
-    dispatch({ type: 'add', previousKey, snapshot });
-  };
-
-  const onChildChanged = (snapshot: database.DataSnapshot | null) => {
-    dispatch({ type: 'change', snapshot });
-  };
-
-  const onChildMoved = (
-    snapshot: database.DataSnapshot | null,
-    previousKey?: string | null
-  ) => {
-    dispatch({ type: 'move', previousKey, snapshot });
-  };
-
-  const onChildRemoved = (snapshot: database.DataSnapshot | null) => {
-    dispatch({ type: 'remove', snapshot });
-  };
-
-  const onError = (error: FirebaseError) => {
-    dispatch({ type: 'error', error });
-  };
-
-  const onValue = () => {
-    dispatch({ type: 'value' });
-  };
+  const queryRef = useIsEqualRef(query, () => dispatch({ type: 'reset' }));
 
   useEffect(() => {
-    const query: database.Query | null | undefined = ref.current;
-    if (!query) {
+    const ref: database.Query | null | undefined = queryRef.current;
+    if (!ref) {
       dispatch({ type: 'empty' });
       return;
     }
-    // This is here to indicate that all the data has been successfully received
-    query.once('value', onValue, onError);
-    query.on('child_added', onChildAdded, onError);
-    query.on('child_changed', onChildChanged, onError);
-    query.on('child_moved', onChildMoved, onError);
-    query.on('child_removed', onChildRemoved, onError);
+
+    const onChildAdded = (
+      snapshot: database.DataSnapshot | null,
+      previousKey?: string | null
+    ) => {
+      dispatch({ type: 'add', previousKey, snapshot });
+    };
+
+    const onChildChanged = (snapshot: database.DataSnapshot | null) => {
+      dispatch({ type: 'change', snapshot });
+    };
+
+    const onChildMoved = (
+      snapshot: database.DataSnapshot | null,
+      previousKey?: string | null
+    ) => {
+      dispatch({ type: 'move', previousKey, snapshot });
+    };
+
+    const onChildRemoved = (snapshot: database.DataSnapshot | null) => {
+      dispatch({ type: 'remove', snapshot });
+    };
+
+    const onError = (error: FirebaseError) => {
+      dispatch({ type: 'error', error });
+    };
+
+    const onValue = (snapshots: database.DataSnapshot[] | null) => {
+      dispatch({ type: 'value', snapshots });
+    };
+
+    let childAddedHandler: ReturnType<typeof ref.on> | undefined;
+    const children: database.DataSnapshot[] = [];
+    const onInitialLoad = (snapshot: database.DataSnapshot) => {
+      let childrenToProcess = Object.keys(snapshot.val()).length;
+
+      const onChildAddedWithoutInitialLoad = (
+        addedChild: database.DataSnapshot,
+        previousKey?: string
+      ) => {
+        // process the first batch of children all at once
+        if (childrenToProcess > 0) {
+          childrenToProcess--;
+          children.push(addedChild);
+
+          if (childrenToProcess === 0) {
+            onValue(children);
+          }
+
+          return;
+        }
+
+        onChildAdded(snapshot, previousKey);
+      };
+
+      childAddedHandler = ref.on(
+        'child_added',
+        onChildAddedWithoutInitialLoad,
+        onError
+      );
+    };
+
+    ref.once('value', onInitialLoad, onError);
+    const childChangedHandler = ref.on(
+      'child_changed',
+      onChildChanged,
+      onError
+    );
+    const childMovedHandler = ref.on('child_moved', onChildMoved, onError);
+    const childRemovedHandler = ref.on(
+      'child_removed',
+      onChildRemoved,
+      onError
+    );
 
     return () => {
-      query.off('child_added', onChildAdded);
-      query.off('child_changed', onChildChanged);
-      query.off('child_moved', onChildMoved);
-      query.off('child_removed', onChildRemoved);
+      ref.off('child_added', childAddedHandler);
+      ref.off('child_changed', childChangedHandler);
+      ref.off('child_moved', childMovedHandler);
+      ref.off('child_removed', childRemovedHandler);
     };
-  }, [ref.current]);
+  }, [dispatch, queryRef]);
 
   return [state.value.values, state.loading, state.error];
 };
 
 export const useListKeys = (query?: database.Query | null): ListKeysHook => {
   const [value, loading, error] = useList(query);
   return [
-    value ? value.map(snapshot => snapshot.key as string) : undefined,
+    value ? value.map((snapshot) => snapshot.key as string) : undefined,
     loading,
     error,
   ];
@@ -86,7 +124,7 @@ export const useListVals = <T>(
   const values = useMemo(
     () =>
       snapshots
-        ? snapshots.map(snapshot =>
+        ? snapshots.map((snapshot) =>
             snapshotToData(snapshot, options ? options.keyField : undefined)
           )
         : undefined,