title: Warning: Cannot update during an existing state transition
body: <p>I have a complex app and it gives me the following warning:</p>
  
  <blockquote>
    <p>Warning: setState(...): Cannot update during an existing state transition (such as within <code>render</code> or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to <code>componentWillMount</code>.</p>
  </blockquote>
  
  <p>In two words this warning occurs when I press an 'add' button, that should add another component to my app. Here is a corresponding piece of code:</p>
  
  <pre><code>&lt;Button onClick={addChartHandler.bind(this)}&gt;&lt;Glyphicon glyph="plus" /&gt;&lt;/Button&gt;
  </code></pre>
  
  <p><code>addChartHandler</code> comes from it's container component:</p>
  
  <pre><code>addChartHandler() {
      store.dispatch(addChart());
  }
  </code></pre>
  
  <p>addChart simply increases the components counter. And the app container subscribes to these changes:</p>
  
  <pre><code>const mapStateToProps = (store) =&gt; {
      return {
          count: store.app.chartsCount
      };
  }
  </code></pre>
  
  <p>It's hard for me to trace the warning, but I called <code>console.log</code> each time every component renders. It appears that this warning pops out after rendering this component (which is dumb component for my <code>App</code>):</p>
  
  <pre><code>render() {
      let charts = [];
  
      for (let i = 0; i &lt; this.props.count; i++) {
          charts.push(&lt;ChartContainer id={i} key={i} size={this.props.size} /&gt;);
      }
      console.log('APP RENDER');
      console.log(charts);
      return (
          &lt;div className="container-padding"&gt;
              &lt;NavContainer /&gt;
              {charts}
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>Any suggestions are welcome. Been working on that for at least three hours, ran out of ideas.</p>