Calling setState in render causes infinite loop

This may seem really silly to do to call setState in render. However it’s possible for this to happen if a component has a callback which is being called immediately during render and in your callback handler you call setState.

[jimbolla]

I ran into this by accident once… I had onClick={this.setState({inProgress: true})} instead of onClick={() => this.setState({inProgress: true})}. It would be nice if React detected the problem and threw an error “setState detected in render() of SomeComponent” instead of going into the infinite loop.

[sophiebits]

Again this is an oversimplification and what Foo might be doing is dumb but react still shouldn’t call render immediately after setState in the same reconciliation cycle.

The fact that we support calling setState in componentDidMount or componentDidUpdate is not an accident – doing so in order to trigger an update is sometimes useful.