Why componentDidMount gets called multiple times in react.js & redux? : <p>I read <code>componentDidMount</code> gets called only once for initial rendering but I'm seeing it's getting rendered multiple times.</p>

<p>It seems I created a recursive loop.</p>

<ul>
<li>componentDidMount dispatches action to fetch data</li>
<li>upon receiving the data, it fires success action to store the data in redux state.</li>
<li>a parent react component is connected to redux store and has <code>mapStateToProps</code> for the entry that just changed in the above step</li>
<li>parent renders child components (which is programmatically selected via variable)</li>
<li>the child component's componentDidMount gets called again</li>
<li>it dispaches action to fetch data</li>
</ul>

<p>I think that's what's happening. I may be wrong. </p>

<p>How can I stop the loop?</p>

<p>Here's the code for programmatically rendering child components.</p>

<pre><code> function renderSubviews({viewConfigs, viewConfig, getSubviewData}) {

   return viewConfig.subviewConfigs.map((subviewConfig, index) =&gt; {
     let Subview = viewConfigRegistry[subviewConfig.constructor.configName]
     let subviewData = getSubviewData(subviewConfig)

     const key = shortid.generate()
     const subviewLayout = Object.assign({}, subviewConfig.layout, {key: key})
     return (
       &lt;div
         key={key}
         data-grid={subviewLayout}
         &gt;
         &lt;Subview
           {...subviewData}
           /&gt;
       &lt;/div&gt;
     )
   })
 }
</code></pre>
