React Custom Hook and Firestore Snapshot

I created a React custom hook which listens to firestore database, i followed the documentation in firebase website but I’m having trouble when I re-render the component.
When I refresh my app the useEffect hook runs correctly but the listener inside unsubscribe() method doesn’t. Here is the full code of the hook.

It works fine when the code recompiles itself after I save something in a component (first-render), but when it re-renders it shows as it if was always loading but it never executes the listener. Hope you can help me!

import { db } from "initFirebase";
import { useEffect, useState } from "react";

interface Payment {
  name: string;
  email: string;
  phone: string;
  course: string;
  pagado: boolean;
}

export const usePaymentsCollection = () => {
  const [payments, setPayments] = useState<Payment[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [error, setError] = useState<any>(null);

  useEffect(() => {
    const unsubscribe = () => {
      try {
        db.collection("payments").onSnapshot(
          (snapshot) => {
            if (snapshot.docs.length) {
              console.log("simona");
              let allDocs: Payment[] = [];
              snapshot.docs.map((doc) => {
                console.log(doc.data());
                return allDocs.push(doc.data() as Payment);
              });
              setPayments(allDocs);
              setIsLoading(false);
            } else {
              console.log("isEmpty");
              setIsLoading(false);
            }
          },
          (error) => {
            // ...
          }
        );
      } catch (e) {
        setError(e);
      }
    };
    return () => unsubscribe();
  }, [db]);

  return {
    payments,
    isLoading,
    error,
  };
};

Source: Ask Javascript Questions

LEAVE A COMMENT