title: Why do all components get rendered twice?
body: <p>I'm trying to learn lifecycles in react but something like this drives me nuts, why all components get rendered twice even when i call them once?</p>
  <p><a href="https://i.stack.imgur.com/WLpJm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WLpJm.png" alt=" " /></a></p>
  <pre><code>import React from &quot;react&quot;;
  
  class App extends React.Component {
    constructor() {
      super();
      console.log(&quot;constructor&quot;);
      this.state = {
        name: &quot;Alex&quot;,
      };
    }
    componentDidMount() {
      console.log(&quot;componentDidMount&quot;);
      console.log(&quot;------------------&quot;);
    }
    render() {
      console.log(&quot;render&quot;);
      return &lt;&gt;Hello World&lt;/&gt;;
    }
  }
  
  export default App;
  </code></pre>