title: React useEffect and setInterval
body: <p>I'm making a React dashboard that calls an API every minute for updates. Following the many answers in SO, I have this at the moment that sort of works:</p>
  <pre><code>const Dashboard = (props) =&gt; {
    const [stockData, setStockData] = useState([]);
  
    useEffect(() =&gt; {
      //running the api call on first render/refresh 
      getAPIData();
      //running the api call every one minute
      const interval = setInterval(() =&gt; {
       getAPIData()
      }, 60000);
      return () =&gt; clearInterval(interval);
    }, []);
    
    //the api data call
    const getAPIData = async () =&gt; {
      try {
        const stdata = await DataService.getStockData();
        setStockData(stdata);
      }
      catch (err) {
        console.log(err);
      }
    };
  </code></pre>
  <p>However I keep getting browser warning</p>
  <pre><code>React Hook useEffect has a missing dependency: 'getAPIData'. Either include it or remove the dependency array
  </code></pre>
  <p>Is this a cause for concern (e.g. causing memory leaks)?</p>
  <p>Ive tried to fix it:</p>
  <ul>
  <li>It doesnt seem possible to not use useEffect (use setInterval directly)</li>
  <li>If I remove dependency or put stockData as dependency for useEffect,
  I'll see the API call being made every second, so I assume thats not
  right.</li>
  <li>If I put the api data call block directly in useEffect, the page wont
  have the data shown when it loads the first time/or the page refreshed and I have to wait
  for a minute.</li>
  </ul>
  <p>I found several references on the issue such as
  <a href="https://blog.davidvassallo.me/2020/04/09/react-hooks-and-setinterval/" rel="nofollow noreferrer">here</a>
  and
  <a href="https://overreacted.io/making-setinterval-declarative-with-react-hooks/" rel="nofollow noreferrer">here</a>
  but I couldn't comprehend it given that I've only started using React
  a month ago.</p>
  <p>Appreciate any help for this!</p>