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);
});
});
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);
});
}, []);
Check the Documentation or check this example w3school
Only run the effect on the initial render:
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);
});
}, []); // <- add empty brackets here