Why componentDidMount in higher order component called more than once?
<p>The <a href="https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount" rel="nofollow">docs</a> says:</p>

<blockquote>
  <p>Invoked once, only on the client (not on the server), immediately
  after the initial rendering occurs.</p>
</blockquote>

<p>Now, when I try to create a higher order component:</p>

<pre><code>import React from 'react';
import { connect } from 'react-redux';

function wrap(Wrapped) {

  class Wrapper extends React.Component {
    componentDidMount() {
      // I will place some reusable functionality here which need to
      // be called once on mounted.
      console.log('wrapper component mounted');
    }
    render() {
      return &lt;Wrapped {...this.props}/&gt;
    }
  }
  return Wrapper;
}

class Wrapped extends React.Component {
  componentDidMount() {
    console.log('wrapped component mounted');
  }
  render() {
    return &lt;div&gt;&lt;/div&gt;;
  }
}

connect()(wrap(Wrapped));
</code></pre>

<p>Now, every time any changes occur in props, the console will print this:</p>

<pre><code>'wrapped component mounted'
'wrapper component mounted'
</code></pre>

<p>If I remove the <code>Wrapper</code>, it will only print this once (when mounted
in the first time):</p>

<pre><code>`wrapped component mounted`
</code></pre>

<p>So, Why componentDidMount in higher order component called more than once?</p>