useEffect is causing a infinite loop when updating state?

Question

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]);

Why do you need data in the dependency array of your useEffect? You are not using it in there? — ghybs
– ghybs, Commented Feb 24, 2022 at 2:09
yeah, you don't need dependency. data in dependency causing infinite loop because the concept is when the data change you will run the function again. if you want to use mounted useEffect you can clear the dependency. it will only run once when you open the page. — Dicka Reynaldi
– Dicka Reynaldi, Commented Feb 24, 2022 at 4:46

Achraf · Accepted Answer · 2022-02-24 02:19:37Z

1

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.

answered Feb 24, 2022 at 2:19

Achraf

1098 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

useEffect is causing a infinite loop when updating state?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related