I'm getting documents from a collection in Firebase and I was wondering if the following useEffect would loop. Is this good practice?

  useEffect(() => {
    const routineRef = collection(db, "routines", session?.user?.id!, currentRoutine.name);
    const unsubscribe = onSnapshot(routineRef, (docsSnap) => {
      setWeightsHistorySnapshot(docsSnap.docs);
      // Infinite loop because this fills up my console
      console.log("Current data: ", docsSnap.docs);
    });
    return () => unsubscribe();
  }, [weightsHistorySnapshot, currentRoutine.name, session?.user?.id]);

CodePudding user response：

From the docs of onSnapshot

An initial call using the callback you provide creates a document snapshot immediately with the current contents of the single document.

You set the state using setWeightsHistorySnapshot, and have weightsHistorySnapshot in your dependencies array, which in turn changes on every call. This causes the hook to run over and over.