title: Do an API call every few seconds using the Context API and React Hooks
body: <p>Is it possible to set an auto-refresh interval every few seconds when using the Context API from React? The getData() function runs axios.get() on the API, but still when I try setInterval() and cleanup in the return function of the useEffect hook, it doesn't clean up the interval. getData() sets to the app level state the current and loading variables.</p>
  
  <p>I simply want to refresh and re-do the API call every few seconds. I tried with the useRef() hook and I got it to working, but still the useEffect doesn't clear up the interval once it's finished. </p>
  
  <p>I want to access the current property in the return function of the component and display some data every time an API call is ran.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>const { loading, current, getData } = appContext;
    useEffect(() =&gt; {
      const interval = setInterval(() =&gt; {
        getData();
        console.log('updated');
      }, 1000);
  
      return () =&gt; clearInterval(interval);
    }, []); // eslint-disable-line // also tried without the []
  </code></pre>
  
  <p>getData() code:</p>
  
  <pre><code>const getData = async () =&gt; {
      setLoading();
  
      const res = await axios.get(process.env.REACT_APP_APIT);
  
      dispatch({ type: GET_CURRENT, payload: res.data });
    };
  </code></pre>