score:14

Accepted answer

setState() in componentWillMount()

componentWillMount() is invoked immediately before mounting occurs. It is called before render(), therefore setting state in this method will not trigger a re-rendering.

setState() in componentWillMount() will not trigger a re-render, but we have never called render() at this point yet. So, setting state here will prepare the state object before we enter the first render() pass.

Actually, for preparing state object for our very first render(), a better way is to use the constructor() instead of calling setState in componentWillMount.

More reading:


setState() in componentWillUpdate()

Note that you cannot call this.setState() here. If you need to update state in response to a prop change, use componentWillReceiveProps() instead.

componentWillUpdate() is called every time a re-render is required, such as when this.setState() is called. The reason we do not call this.setState() here is that the method triggers another componentWillUpdate(). If we trigger a state change in componentWillUpdate() we will end up in an infinite loop.

More reading:

score:0

Component is re-rendered based on its state changes, and React determines when and what should be updated in next render. setState() might be asynchronous and React may batch multiple setState() calls into a single update for performance.

You can't call setState() in these methods is simply because they're designed to do something before actual mounting/updating occurs. They're not for initiating a new render.

Facebook explains component lifecycle here.

score:1

Invoking setState() will cause component to re-render. Once a component rerenders, it will call those methods. So calling setState inside those methods might trigger a rerender loop since it's unable to finish rendering the component.


Related Query

More Query from same tag