title: React useEffect looping many times when fetching data and setState using fetch API
body: <p>Why is this triggering <code>fetchData</code> multiple times? The <code>console.log</code> seems to loop almost infinitely? How do I get this to run just once onload and trigger only once when <code>fetchData()</code> is called later? What am I doing wrong here or missing?</p>
  
  <pre><code>const [data, setData] = useState(null);
  
    let fetchData = React.useCallback(async () =&gt; {
      const result = await fetch(`api/data/get`);
      const body = await result.json();
      setData(body);
      console.log(data)
    },[data])
  
    useEffect(() =&gt; {
      fetchData();
    },[fetchData]);
  </code></pre>
  
  <p>Update (Additional Question): How to wait for <code>data</code> to populate before <code>return()</code> the below this now gives the error because it is null at first?: <code>data.map is not a function</code></p>
  
  <pre><code>return (
      &lt;select&gt;
          {data.map((value, index) =&gt; {
              return &lt;option key={index}&gt;{value}&lt;/option&gt;
          })}
      &lt;/select&gt;
  )
  </code></pre>