Infinite loop with a useEffect in React native

Question

I have a problem, on the two functions below, when I check the debug of my request, there is an infinite loop of my GET request and I don't understand why my useEffect is re-triggering each time.

Here is my code :

const gardenData = async () => {
    setLoading(true);
    const user = await AsyncStorage.getItem('user');
    const parsedUserData = JSON.parse(user);
    try {
      const response = await axios.get(
        `http://127.0.0.1/api/garden?user=${parsedUserData.user.id}`,
        {
          headers: {
            Authorization: `Token ${parsedUserData.token}`,
          },
        },
      );
      if (response.status === 200) {
        setGarden(response.data);
        setLoading(false);
      }
    } catch (e) {
      console.log('Erreur ' + e);
      setLoading(false);
    }
  };

  const getPlotData = async () => {
    const user = await AsyncStorage.getItem('user');
    const parsedUserData = JSON.parse(user);
    const id = garden.map(g => g.id);
    alert(id);

    try {
      const response = await axios.get(
        `http://127.0.0.1/api/plots?garden=${id}`,
        {
          headers: {
            Authorization: `Token ${parsedUserData.token}`,
          },
        },
      );
      if (response.status === 200) {
        setPlot(response.data);
      }
    } catch (e) {
      alert(e);
    }
  };

  useEffect(() => {
    gardenData();
    getPlotData();
  }, [setGarden, setPlot]);

Thanks for the help provided

Can you share any working code link because this shouldn't happen ideally because in docs also it's written that setters value won't change it would remain stable.([The identity of the setCount function is guaranteed to be stable so it’s safe to omit.](https://reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often)) — meet mehta, Apr 26 '22 at 17:24

Liam Morgan · Answer 1 · 2022-05-06T16:31:22.993

0

The array you pass in to the second parameter for useEffect should contain the state variables to watch that when changed will cause the useEffect to run again, because you are passing it [setGarden, setPlot], when you are using these methods to setPlot(response.data) then useEffect runs again, causing an infinite loop

If you want this to run just once pass useEffect an empty array like this:

useEffect(() => {
    gardenData();
    getPlotData();
  }, []);

edited May 06 '22 at 16:31

answered Apr 26 '22 at 17:17

Liam Morgan

136
2
13

Thanks for your response but I have tried an empty array too and I have the same infinite loop of my get request – PierroTH Apr 26 '22 at 17:19

score 0 · Answer 2 · answered Apr 26 '22 at 17:17

0

If setGarden and setPlot are the state, I think you are watching on two vars who changes in the functions that you call. Just put empty array in the useEffect's watcher

answered Apr 26 '22 at 17:17

Sandex

95
6

set functions don't change. so there should be something else – İlker Apr 26 '22 at 17:30
what if we split useEffect into two different ones with the functions gardenData() and getPlotData(), respectively, and monitor the empty array in each? – Sandex Apr 26 '22 at 17:42

Infinite loop with a useEffect in React native

2 Answers2