title: React: useState callback / fetching data infinite loop
body: <p>If I run the code below, I get an infinite loop (as indicated in the console log).  I think this happens because my useState callback (setEvents) causes a re-render which causes the function App to be re-run, which then re-fetches the data, calls my useState callback again and so on.  This code is based on numerous examples I've seen online - what am I doing wrong?</p>
  
  <pre><code>import React, {useState, useEffect} from 'react';
  import {BrowserRouter as Router, Route} from "react-router-dom";
  import EventMonitorRoute from './routes/event-monitor';
  import ReactDOM from 'react-dom';
  
  
  function App() {
  
      console.log('Running App'); // DEBUG
  
      let basename = (window.location.hostname === 'localhost') ? '/' : '/event_monitor';
      let apiURL = 'https://example-api.com';
      const [events, setEvents] = useState(null);
  
      async function fetchData(apiURL) {
          console.log('fetching data'); // DEBUG
          const response = await fetch(apiURL);
          const json = await response.json();
          setEvents(json);
      }
  
      useEffect(() =&gt; {
          fetchData(apiURL)
      });
  
      return (
          &lt;Router basename={basename}&gt;
              &lt;div id="app-container-inner"&gt;
                  &lt;Route exact path="/" render={(props) =&gt; &lt;EventMonitorRoute events={events} {...props}/&gt;}/&gt;
              &lt;/div&gt;
          &lt;/Router&gt;
      );
  }
  
  ReactDOM.render(
      &lt;App/&gt;,
      document.getElementById('app-container')
  );
  </code></pre>