title: Render is called twice when fetching data from a REST API
body: <p>I am trying to interact with a REST API using React, and I have realized that when I fetch the data, <code>render</code> is called once <strong>without the data</strong>, and then again <strong>with</strong> the data.</p>
  <p>This throws an exception when I try to process this data, but I can use an if statement to check if data is null or not. However, I am not sure if that's needed.</p>
  <pre><code>class App extends Component {
    state = {
      TodoList: {},
    };
  
    componentWillMount() {
      axios.get(&quot;http://localhost:5001/1&quot;).then((response) =&gt; {
        this.setState({
          TodoList: response.data,
        });
      });
    }
  
    render() {
      console.log(this.state);
      return &lt;h1&gt;hello &lt;/h1&gt;;
    }
  }
  </code></pre>
  <p>This is what I see in in the console:
  <a href="https://i.stack.imgur.com/59PKB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/59PKB.png" alt="enter image description here" /></a></p>