title: ReactJS: How many times is a mapped component's constructor called?
body: <p>I have a React Component that is rendered multiple times using Array.prototype.map() inside another component.</p>
  
  <p>How many times should the first component's constructor be called?  I was expecting as many times as the length of the mapped array, but it seems it's only called once.</p>
  
  <p>In my specific code, it is called just before the last render().</p>
  
  <p>Sample code:</p>
  
  <pre><code>class ComponentB extends Component {
    constructor(props) {
      super(props) // added upon first reply
      this.handleObjectAdd = this.handleObject.bind(this);
      this.state.objects = [];
    }
  
    handleObjectAdd() {
      this.state.objects.unshift({prop1: this.state.objects.length + 1});
    }
  
    render() {
        return (
          &lt;div&gt;
            &lt;button onClick={this.handleObjectAdd}&gt;ADD&lt;/button&gt;
            { this.state.objects.map((object, index) =&gt;
                &lt;ComponentA key={index} details={object}/&gt;
              )
            }
          &lt;/div&gt;
        )
      })
    }
  }
  
  class ComponentA extends Component {
    constructor(props) {
      super(props) // added upon first reply
      console.log('ComponentA constructor called');
    }
    render() {
      console.log('ComponentA render() called');
      return (
        &lt;input type="text" value={this.props.details.prop1}&gt;&lt;/input&gt;
      )
    }
  }
  </code></pre>
  
  <p>For an array of 5 elements (all ComponentA instances) I get the following lines:</p>
  
  <pre><code>ComponentA render() called
  ComponentA render() called
  ComponentA render() called
  ComponentA render() called
  ComponentA constructor called
  ComponentA render() called
  </code></pre>
  
  <p>Also, the log line for the constructor always appears before the last constructor log line, regardless of the number of array elements.</p>
  
  <p>Why is the log output such as above?  Would appreciate any insight.</p>
  
  <p>This was flagged as a duplicate of <a href="https://stackoverflow.com/questions/45595458/react-rerender-dynamic-components-solr">React Rerender dynamic Components (Solr)</a>, but it is not.</p>