title: In React why does a child component's render function get called twice?
body: <p>I have the simplest of apps. There's a parent <code>&lt;App&gt;</code> component and a child <code>&lt;MyChildOne&gt;</code> component. Both are class-based. </p>
  
  <p>Can anyone please explain <strong>why React calls the render function of child <code>&lt;MyChildOne&gt;</code>  twice?</strong> </p>
  
  <p>Here's my <code>&lt;App&gt;</code> code:</p>
  
  <pre><code>import React from "react";
  import "./App.css";
  import MyChildOne from "./MyChildOne.js";
  
  class App extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;MyChildOne /&gt;
        &lt;/div&gt;
      );
    }
  }
  export default App;
  </code></pre>
  
  <p>And here's my <code>&lt;MyChildOne&gt;</code> code:</p>
  
  <pre><code>import React from "react";
  
  class MyChildOne extends React.Component {
    counter = 0;
  
    render() {
      this.counter = this.counter + 1;
  
      console.log(
        "Code has called MyChildOne and this.counter has value: " + this.counter
      );
  
      return &lt;h1&gt;Hello, {this.counter}&lt;/h1&gt;;
    }
  }
  
  export default MyChildOne;
  </code></pre>
  
  <p>The output in the browser is this:</p>
  
  <p><strong>Hello, 1</strong> </p>
  
  <p>And here's what gets logged in the console:</p>
  
  <p><em>Code has called MyChildOne and this.counter has value: 1</em></p>
  
  <p><em>Code has called MyChildOne and this.counter has value: 2</em></p>
  
  <p><strong>So clearly React is calling the render function of <code>&lt;MyChildOne&gt;</code> twice – but I cannot understand why!!!!</strong> </p>
  
  <p>This is no good to me because I want to pass as props an array of things from <code>&lt;App&gt;</code> to <code>&lt;MyChildOne&gt;</code>  and I want <code>&lt;MyChildOne&gt;</code> to render, let's say, an <code>&lt;h1&gt;</code> for every 'thing' member of that array. I do not want the <code>&lt;h1&gt;</code>s to be rendered twice!</p>