Check updated state of GET request in useEffect Hook

Question

When I create an item and click save, I would like when I return to the page it automatically updates with what I just created. So that my useEffect detects the changes that have just arrived at the level of the GET request.

But I tried everything, I tried to put the variable garden in the array of useEffect but it makes an infinite loop of GET request, I also tried to put setGarden it does not make an infinite loop but it does not update automatically, I have to reload the page...

Here is the code :

const [garden, setGarden] = useState([]);
const [plot, setPlot] = useState([]);
const [loading, setLoading] = useState(false);
const navigation = useNavigation();

  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) {
        navigation.navigate('LogScreen');
        setGarden(response.data);
        setLoading(false);
        try {
          const plotResponse = await axios.get(
            `http://127.0.0.1/api/plots?garden=${response.data[0].id}`,
            {
              headers: {
                Authorization: `Token ${parsedUserData.token}`,
              },
            },
          );
          if (plotResponse.status === 200) {
            setPlot(plotResponse.data);
          }
        } catch (e) {
          alert(e);
        }
      }
    } catch (e) {
      console.log('Erreur ' + e);
      setLoading(false);
    }
  };

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

Thanks for the help !

Answer 1

You can just simply use an indication to make sure the gardenData function in ran once. Either you can initialize one of your state or even you can use a complete new state This is only run the code once.

    const [garden, setGarden] = useState([]);
    const [plot, setPlot] = useState([]);
    const [loading, setLoading] = useState(false);
    const [FirstRun, setFirstRun] = useState(true);
    const navigation = useNavigation();

      const gardenData = async () => {
        if(!FirstRun) return;
        setFirstRun(false);
        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) {
            navigation.navigate('LogScreen');
            setGarden(response.data);
            setLoading(false);
            try {
              const plotResponse = await axios.get(
                `http://127.0.0.1/api/plots?garden=${response.data[0].id}`,
                {
                  headers: {
                    Authorization: `Token ${parsedUserData.token}`,
                  },
                },
              );
              if (plotResponse.status === 200) {
                setPlot(plotResponse.data);
              }
            } catch (e) {
              alert(e);
            }
          }
        } catch (e) {
          console.log('Erreur ' + e);
          setLoading(false);
        }
      };

      useEffect(() => {
if(FirstRun)
{
        gardenData();
}
// your code here

}, [garden]);