fetch API call being sent multiple times

Question

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);
    }

Answer 1

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
      })
  }
}

Answer 2

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

Answer 3

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

Answer 4

Since original question has been updated, my answer isn't relevant anymore (there is correct answer already posted). So, I am removing it.