title: React Hooks Exhaustive-deps async infinite Loop
body: <p>I have the following component:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  
  const App = () =&gt; {
      const [data, setData] = useState&lt;null | any[]&gt;(null);
      const [checked, setChecked] = useState(false);
      const [loading, setLoading] = useState(false);
  
      useEffect(() =&gt; {
          setLoading(true);
  
          (async () =&gt; {
              if (data) {
                  // Could do something else here if data already exsisted
                  console.log(&quot;Data exists already&quot;);
              }
  
              const ret = await fetch(&quot;https://jsonplaceholder.typicode.com/users?delay=1000&quot;, { cache: &quot;no-store&quot; });
              const json = await ret.json();
              setData(json);
              setLoading(false);
          })();
  
      }, [checked]);
  
      return (
          &lt;&gt;
              &lt;h1&gt;useEffect Testing {loading &amp;&amp; &quot; ⌛&quot;}&lt;/h1&gt;
              &lt;hr /&gt;
              &lt;input type=&quot;checkbox&quot; checked={checked} onChange={(e) =&gt; setChecked(e.target.checked)} /&gt;
              &lt;pre style={{ fontSize: &quot;0.8em&quot; }}&gt;{JSON.stringify(data)}&lt;/pre&gt;
          &lt;/&gt;
      );
  };
  
  export default App;
  
  </code></pre>
  <p>Currently, my <code>if(data)</code> is pointless however if I wanted to check the current <code>data</code> state and then run an asynchronous function based on the state the <em><strong>eslint(react-hooks/exhaustive-deps)</strong></em> tells me the hook is missing the <code>data</code> dependency, which it is. The problem comes when I add data to the dependency list causing an infinite loop.</p>
  <p>Any idea how to resolve this? It feels like it should be fairly simple pattern however everything I find recomends using the extended <code>setState(prev =&gt; prev + 1)</code> overload which doesn't help me in this case.</p>