endless request to back-end using useEffect hook React

July 6, 2022

I have a problem, I’m trying to make a a request to my back-end so when my component loads it can receive some data from it to render the problem is that the application goes in an infinite loop of requests that makes my fan spin like hell, any solutions?

  useEffect(() => {
    Axios.post("http://localhost:3005/people", {UUID}).then((response) => {
        const peopleArray = [];
        for (let key in response.data) {
          peopleArray.push({ ...response.data[key] });
        }
        setPeople(peopleArray);
      });
  });

>Solution :

You need to an array of dependences to useEffect, to only run on the component mounted or any of these dependencies change. as without an array of dependences, it will run with each render, which will cause an infinite loop.

      useEffect(() => {
    Axios.post("http://localhost:3005/people", {UUID}).then((response) => {
        const peopleArray = [];
        for (let key in response.data) {
          peopleArray.push({ ...response.data[key] });
        }
        setPeople(peopleArray);
      });
  }, []);