CODEWITHSUNDEEP
reactjstypescript
Richardson
Richardson

Reputation: 2285

useEffect is causing a infinite loop when updating state?

any idea how to refactor this code so I can be able to simply use firestore snapshot (Realtime data) to update the current state with those changeable data the SetState function simply update the current state with the new data but since i am calling is in useEffect it is triggering a loop can I use callback instead to work around this issue ?

  const [data, setData] = useState<any>(null);
  
  useEffect(() => {
    let colRef = collection(db, 'Weeks');
    const docRef = doc(colRef, context.focus as string);
    const unsub = onSnapshot(docRef, (doc) => {
      setData(doc.data());
      if (doc.data()) {
        context.SetState({ arr: doc.data()?.arr });
      }
      return () => unsub;
    });
  }, [data]);

Upvotes: 1

Views: 261

Answers (1)

Achraf
Achraf

Reputation: 109

remove data from the dependency and the infinate loop will end. you do not use the data in the useEffect, remember to not useEffect on a state that you use its setter inside that useEffect or you will find yourself in such a situation its kinda like a recusive call without a condition to exit the loop.

Upvotes: 1

Related Questions