CODEWITHSUNDEEP
javascriptreactjs
Kisho
Kisho

Reputation: 327

fetch API call being sent multiple times

I am building a recipe app and for some reason my API calls are sent 5 times since I see the data 5 times when in console.log it. This is an issue for me as the API blocks me from sending more than 5 calls a minute and it wont be very UX friendly if the end product has the same issue. Can anyone see where I am going wrong in the below code?

Id and app key is changed. please note that this is componentDidUpdate since I am running it when the state is changed -thus sending a fetch call

async componentDidUpdate() {
        let response = await axios.get(
            `https://api.edamam.com/search?q=${this.state
                .searchTerm}&app_id=c5e1&app_key=946ddb0f02a86bd47b89433&to=20`
        );
        let data = response.data.hits.map((data) => ({
            name: data.recipe.label,
            src: data.recipe.image,
            source: data.recipe.source,
            url: data.recipe.url,
            healthLabels: data.recipe.healthLabels,
            dietLabels: data.recipe.dietLabels,
            calories: data.recipe.calories,
            totalWeight: data.recipe.totalWeight,
            totalTime: data.recipe.totalTime,
            totalNutrients: data.recipe.totalNutrients,
            ingredients: data.recipe.ingredients
        }));
        this.setState({ recipeResults: data });
        console.log(data);
    }

Upvotes: 1

Views: 17476

Answers (3)

Bibipkins
Bibipkins

Reputation: 471

If you want to do api call based on some piece of state being updated you should use either Redux or React context/hooks API. These libraries make it easy to subscribe to some state changes and execute an appropriate action. Ideally you should not do something like fetch in your componentDidUpdate as it can be called many times per second
Redux is really fast and time proven but it takes some time to setup and maintain the structure around it. So in your case I would look at useEffect() method of React hooks

Upvotes: 0

Kirill Skomarovskiy
Kirill Skomarovskiy

Reputation: 1565

The request depends on this.state.searchTerm. so if this.state.searchTerm is changed your component will make a request. 

componentDidUpdate(prevProps, prevState) {
  if (prevState.searchTerm !== this.state.searchTerm) {
    axios.get(`https://api.edamam.com/search?q=${this.state.searchTerm}&app_id=c5e1&app_key=946ddb0f02a86bd47b89433&to=20`)
      .then((response) => {
        // process response
      })
      .catch(() => {
        // process error
      })
  }
}

Upvotes: 1

Maksym Bezruchko
Maksym Bezruchko

Reputation: 1258

The problem is that you are fetching data in componentDidUpdate method of the component and using setState. It triggers component re-render and the code inside your componentDidUpdate executes again and again after every setState. Use componentDidMount for one time data fetching

Upvotes: 0

Related Questions