title: React Typescript how to stop axios/fetch calls from making multiple calls at one time
body: <p>I am trying to connect my site with the rapidAPI using axios/fetch. I have multiple components I need to make, so I need to keep my call numbers low. That being said, I am a little new to React calls and both my axios and fetch calls are making the same API call multiple times, sucking up my API calls in no time (500 in a few minutes of trying to fix, lol). I'm not sure how to change my code up to work with async/await, and could use some help if that is the best solution. I've tried to just use cancelTokens, but this doesn't do the trick either. Below is my code using cancelTokens with a timeout. I know this is NOT a good and efficient way to remedy this problem, and need help to fix what I feel is an easy fix that just hasn't clicked in my head yet. Thank you so much in advance! here is my <code>Stock.tsx</code> component, which in the end grabs the stock ticker price:</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;../styles/Stock.css&quot;;
  import axios from &quot;axios&quot;;
  import loader from &quot;../graphics/loading.gif&quot;;
  
  const { useState } = React;
  
  function Stock() {
    const [price, setPrice] = useState(&quot;0&quot;);
    let options: any;
    const cancelToken = axios.CancelToken;
    const source = cancelToken.source();
    options = {
      cancelToken: source.token,
      method: &quot;GET&quot;,
      url: &quot;https://yh-finance.p.rapidapi.com/stock/v2/get-summary&quot;,
      params: { symbol: &quot;AAPL&quot;, region: &quot;US&quot; },
      headers: {
        &quot;x-rapidapi-host&quot;: &quot;yh-finance.p.rapidapi.com&quot;,
        &quot;x-rapidapi-key&quot;: &quot;nonono:)&quot;,
      },
    };
  
    axios
      .request(options)
      .then(function (response) {
        console.log(response.data);
        setPrice(response.data.price.regularMarketPrice.fmt.toString());
      })
      .catch(function (error) {
        console.error(&quot;Error getting price: &quot;, error);
      });
  //i know, this is bad
    setTimeout(() =&gt; {
      source.cancel(&quot;TIME&quot;);
    }, 2000);
    return (
      &lt;&gt;
        {price === &quot;0&quot; ? (
          &lt;div&gt;
            &lt;img src={loader} alt=&quot;loading&quot; className={&quot;loader&quot;} /&gt;
          &lt;/div&gt;
        ) : (
          &lt;div&gt;AAPL: {price}&lt;/div&gt;
        )}
      &lt;/&gt;
    );
  }
  
  export default Stock;
  </code></pre>