CODEWITHSUNDEEP
javascriptreactjsgetaxios
Renato Maretić
Renato Maretić

Reputation: 355

React / Axios send infinite number of requests

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?

Upvotes: 4

Views: 3334

Answers (1)

ApplePearPerson
ApplePearPerson

Reputation: 4439

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.
}, []);

Upvotes: 10

Related Questions