Calling setState in render causes infinite loop

[mikkoh]

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.

[jimfb]

In general, this should never happen; you should not be doing anything remotely related to modifying any component's state within a render function.

I'm curious what your use case is, for having a callback which does a setState; mind sharing?

[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.

[mikkoh]

A video player is playing. I have an Component which sets styles on the scrub bar. When the Component that sets styles updates it fires a callback. (there's a good reason for this but it's beyond explaining in a simple issue) I was listening to this callback and calling setState to notify my component changes happened.

In general setState isn't evaluated until before the next "render" but in this case setState calls immediately which is divergent behaviour from the normal usage of setState.

[jimfb]

If I'm understanding your flow correctly, I still don't see how/why a setState would be occurring within a component's render() function. Do you just mean within a single reconciliation cycle? Keep in mind that render() is not recursive (that's a common miss-conception; the child's render function is not called during the parent's render function).

@mikkoh wrote:

When the Component that sets styles updates it fires a callback.

I assume you're using componentDidUpdate for this? Can you provide a simple JSFiddle example/testcase that demonstrates the error you're running into?

[mikkoh]

This is an oversimplification of the code but:

handleSomething(value) {
  this.setState({
    something: value
  });
}

render() {
  return <Foo 
    someProp={this.props.someValue}
    onCallback={this.handleSomething} 
  />;
}

When Foo receives props it calls onCallback which in turn calls handleSomething. Which will cause render to be called immediately. Then once again handleSomething gets called then render and so on.

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.

[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.

[jcehle]

@mikkoh Did you find a workaround?
just came across this exact issue..

[mikkoh]

I ended up implementing process.nextTick where the callback gets called. This is a workaround and not a fix.

@spicyj setState was not being called called in componentDidMount or componentDidUpdate but rather in a callback that resulted/was called because a component being rendered.

[sophiebits]

@mikkoh Can you provide a specific code example here? I'm not sure I understand exactly what your issue was.

[mikkoh]

@spicyj I posted a snippet earlier. So below when Foo renders it will call this.handleSomething via props.onCallback. Now it's unfortunate cause I can't remember remember at which stage of Foo's render lifecycle props.onCallback gets called (render, componentWillMount, etc) But basically the simple act of Foo being rendered called props.onCallback.

handleSomething(value) {
  this.setState({
    something: value
  });
}

render() {
  return <Foo 
    someProp={this.props.someValue}
    onCallback={this.handleSomething} 
  />;
}

[sophiebits]

I'm still failing to understand why what you're doing causes an infinite loop but that you say adding a process.nextTick alleviates the problem. In either case, if you call setState repeatedly, the component should continue to rerender.

If you can post a working code example (in jsbin, for example) that shows the problem, I'm happy to take another look – but as is since I can't understand what you're doing this is not very actionable for me. I don't understand what the intention of your code is if you're trying to update the parent's state whenever a child renders. Wouldn't you expect that to cause an infinite loop?