title: fetch API call being sent multiple times
body: <p>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?</p>
  
  <p>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</p>
  
  <pre><code>async componentDidUpdate() {
          let response = await axios.get(
              `https://api.edamam.com/search?q=${this.state
                  .searchTerm}&amp;app_id=c5e1&amp;app_key=946ddb0f02a86bd47b89433&amp;to=20`
          );
          let data = response.data.hits.map((data) =&gt; ({
              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);
      }
  </code></pre>