title: Trying to make an API call before using setInterval() in useEffect() hook in React
body: <p>I'm using a <code>useEffect()</code> hook in React to fetch data on an interval every five seconds. When my app first loads, the initial fetch request takes five seconds because it's in the <code>setInterval()</code> function.</p>
  <p>I'm trying to make the API call on page load and then every five seconds after that, make API call on the interval to retrieve new data.</p>
  <p>What I've tried that's not working:</p>
  <pre><code>useEffect(() =&gt; {
     await updateData(id, state, setState)
     .then(() =&gt; {
          const interval = setInterval(async () =&gt; {
              if (id) {
                  await updateData(id, state, setState); // API call 
          }
      }, 5000);
     return () =&gt; {
        clearInterval(interval);
     };
   },[lensName, state, setState])
  }
  </code></pre>
  <p>What I'm currently doing and would like to improve:</p>
  <pre><code>useEffect(() =&gt; {
  // Make API call, once initial call is made and response is returned make calls on a 5 second interval
       const interval = setInterval(async () =&gt; {
          if (id) {
             await updateData(id, state, setState); // API call 
          }
      }, 5000);
      return () =&gt; {
              clearInterval(interval);
      };
     }, [lensName, state, setState])
  }
  </code></pre>
  <p>Any help is greatly appreciated.</p>