React / Axios send infinite number of requests

Question

I'm fetching data from my backend api when component mount and can do it successfuly but my React app keeps sending requests to the server causing it to slow down. I used useEffect hook, but I'm getting the same result without using the hook.

useEffect(() => {
   axios.get('http://127.0.0.1:8000/food_category/')
  .then(response => {
   setFoodCategory(response.data);
   console.log(response.data);
})});

What am I doing wrong?

Answer 1

If you give no dependencies to the useEffect hook, it will execute every time your component renders (which will happen infinitely because you set the state after getting data and thus your component rerenders).

Check out the second argument of useEffect in the docs to learn more about it.

An empty dependencies array indicates the useEffect will act as a mount and only executes once.

useEffect(() => {
    // Do mount stuff here such as executing your request.
}, []);