Warning: Cannot update during an existing state transition

Question

I have a complex app and it gives me the following warning:

Warning: setState(...): Cannot update during an existing state transition (such as within render 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 componentWillMount.

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:

<Button onClick={addChartHandler.bind(this)}><Glyphicon glyph="plus" /></Button>

addChartHandler comes from it's container component:

addChartHandler() {
    store.dispatch(addChart());
}

addChart simply increases the components counter. And the app container subscribes to these changes:

const mapStateToProps = (store) => {
    return {
        count: store.app.chartsCount
    };
}

It's hard for me to trace the warning, but I called console.log each time every component renders. It appears that this warning pops out after rendering this component (which is dumb component for my App):

render() {
    let charts = [];

    for (let i = 0; i < this.props.count; i++) {
        charts.push(<ChartContainer id={i} key={i} size={this.props.size} />);
    }
    console.log('APP RENDER');
    console.log(charts);
    return (
        <div className="container-padding">
            <NavContainer />
            {charts}
        </div>
    );
}

Any suggestions are welcome. Been working on that for at least three hours, ran out of ideas.

@Christian obtains the data needed to draw a chart (using chart.js) — Oscar

Harkirat Saluja Harkirat Saluja · Accepted Answer · 2016-12-13T14:10:46

This is the line of code because of code which causes the issue I feel:-

  for (let i = 0; i < this.props.count; i++) {
        charts.push(<ChartContainer id={i} key={i} size={this.props.size} />);
    }

I think you are doing setState somewhere in render or your state is updating where it should not do. Can you share you ChartContainer component once?

Can you try this out?

constructor(){
   state : {
     charts : []
  } 
}

componentWillReceiveProps(nextProps){
  if(nextProps.count != this.props.count){
     let charts = []
     for (let i = 0; i < this.props.count; i++) {
        charts.push(<ChartContainer id={i} key={i} size={this.props.size}      />);
    }
   this.setState({charts:charts})
  }
}

render() {
    return (
        <div className="container-padding">
            <NavContainer />
            {this.state.charts}
        </div>
    );
}

Warning: Cannot update during an existing state transition

3 Answers