React useEffect and setInterval

Question

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:

const Dashboard = (props) => {
  const [stockData, setStockData] = useState([]);

  useEffect(() => {
    //running the api call on first render/refresh 
    getAPIData();
    //running the api call every one minute
    const interval = setInterval(() => {
     getAPIData()
    }, 60000);
    return () => clearInterval(interval);
  }, []);
  
  //the api data call
  const getAPIData = async () => {
    try {
      const stdata = await DataService.getStockData();
      setStockData(stdata);
    }
    catch (err) {
      console.log(err);
    }
  };

However I keep getting browser warning

React Hook useEffect has a missing dependency: 'getAPIData'. Either include it or remove the dependency array

Is this a cause for concern (e.g. causing memory leaks)?

Ive tried to fix it:

• It doesnt seem possible to not use useEffect (use setInterval directly)
• 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.
• 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.

I found several references on the issue such as here and here but I couldn't comprehend it given that I've only started using React a month ago.

Appreciate any help for this!

Answer 1

You can resolve this issue in multiple way:

1. You can put getApiData in useEffect direct and use it...

2. You can use useCallBack, useEffect is go to re-render and make mempry leeek issue since every time react render Dashboard its re-create the getAPIData, you can prevent this case by using useCallBack, and you must make sure about dependency, just you need to put what you need...for example: