Counting a collection's documents with Firebase Firestore

import { useCallback } from 'react';
import { useFirestore } from 'reactfire';
 
import {
  where,
  getCountFromServer,
  query,
  collection,
  CollectionReference,
} from 'firebase/firestore';
 
import { Task } from '~/lib/tasks/types/task';
 
const tasksCollection = 'tasks';
const path = `organizationId`;
const operator = '==';
 
function useFetchTasksCount() {
  const firestore = useFirestore();
 
  return useCallback(
    (organizationId: string) => {
      const constraints = [
        where(path, operator, organizationId)
      ];
 
      const collectionRef = collection(
        firestore,
        tasksCollection
      ) as CollectionReference<WithId<Task>>;
 
      return getCountFromServer(
        query(collectionRef, ...constraints)
      );
    },
    [firestore]
  );
}
 
export default useFetchTasksCount;

function TasksCollectionCount(
  props: React.PropsWithChildren<{
    organizationId: string
}>) {
  const fetchTaskCount
    = useFetchTasksCount();
 
  const [tasksCount, setTasksCount]
    = useState<number>();
 
  useEffect(() => {
    // when the component mounts, we store the tasks count in the state
    fetchTaskCount(props.organizationId).then((result) => {
      setTasksCount(result.data().count);
    });
  }, [fetchTaskCount, props.organizationId]);
 
  if (tasksCount === undefined) {
    return <p>Loading count...</p>;
  }
 
  return <div>Tasks ({ tasksCount })</div>;
}