Function useList

database/useList.ts:17–122

(query?: Query | null)

import { ListHook, ListKeysHook, ListValsHook, Val } from './types';

export const useList = (query?: Query | null): ListHook => {
  const [state, dispatch] = useListReducer();

  const queryRef = useIsEqualRef(query, () => dispatch({ type: 'reset' }));
  const ref: Query | null | undefined = queryRef.current;

  useEffect(() => {
    if (!ref) {
      dispatch({ type: 'empty' });
      return;
    }

    const onChildAdded = (
      snapshot: DataSnapshot | null,
      previousKey?: string | null
    ) => {
      dispatch({ type: 'add', previousKey, snapshot });
    };

    const onChildChanged = (snapshot: DataSnapshot | null) => {
      dispatch({ type: 'change', snapshot });
    };

    const onChildMoved = (
      snapshot: DataSnapshot | null,
      previousKey?: string | null
    ) => {
      dispatch({ type: 'move', previousKey, snapshot });
    };

    const onChildRemoved = (snapshot: DataSnapshot | null) => {
      dispatch({ type: 'remove', snapshot });
    };

    const onError = (error: Error) => {
      dispatch({ type: 'error', error });
    };

    const onValue = (snapshots: DataSnapshot[] | null) => {
      dispatch({ type: 'value', snapshots });
    };

    let childAddedHandler: ReturnType<typeof firebaseOnChildAdded> | undefined;
    const onInitialLoad = (snapshot: DataSnapshot) => {
      const snapshotVal = snapshot.val();
      let childrenToProcess = snapshotVal
        ? Object.keys(snapshot.val()).length
        : 0;

      // If the list is empty then initialise the hook and use the default `onChildAdded` behaviour
      if (childrenToProcess === 0) {
        childAddedHandler = firebaseOnChildAdded(ref, onChildAdded, onError);
        onValue([]);
      } else {
        // Otherwise, we load the first batch of children all to reduce re-renders
        const children: DataSnapshot[] = [];

        const onChildAddedWithoutInitialLoad = (