65. Is it good to use setState() in componentWillMount() method?

[AnandKumarJha]

The answer written here is wrong. I think it is taken from this stack overflow link https://stackoverflow.com/questions/40199151/cant-set-state-in-componentwillmount. There reason behind setState not working was some parsing error. I think the answer for it need to be updated. I have tested it with the below code and it working properly with componentWillMount.

import React, { Component } from 'react';
import { Text } from 'react-native';

class Cat extends Component {

constructor(props) {
super(props)
this.state = {
name: 'Anand'
};
}

componentWillMount() {
setTimeout(()=> {
this.setState({name:'anand Kumar jha will'})
}, 3000)
}

componentDidMount() {
setTimeout(()=> {
this.setState({name:'anand Kumar jha did'})
}, 1000)
}

render() {
return (
Hello, I am your cat! {this.state.name}
);
}
}

export default Cat;

[KateDK]

Few points:

• Perhaps its a good idea to mention that this method will be deprecated eventually and is not recommended to be used?

• Im not sure the current answer is wrong, but I think it answers the wrong question.

Using setState inside componentWillMount() is fine:
"The componentWillMount() is a chance for us to handle configuration, update our state, and in general prepare for the first render. At this point, props and initial state are defined. We can safely query this.props and this.state, knowing with certainty they are the current values. This means we can start performing calculations or processes based on the prop values."
taken from here.
"calling setState() synchronously in componentWillMount() method will not trigger an extra rendering"
taken from here

However: It is not recommended to use asynchronous actions inside componentWillMount():
"These lifecycle methods have often been misunderstood and subtly misused; furthermore, we anticipate that their potential misuse may be more problematic with async rendering."
taken from here

another great explanation:
"Well, when you do an async request in the constructor / componentWillMount you do it before render gets called, by the time
the async operation has finished the render method most probably already finished and no point to set the "initial state" at this stage is it?.
I'm not sure this is your case here, but most of the cases that developers wants to initiate state asynchronously in componentWillMount is to avoid a second render call. but you can't avoid it can you, like mentioned above, render will fire anyway before the async operation will finish.
So, the best time to call an async operation is after a render has called and the component mounted (you could mount null or an empty <div/>) and then fetch your data, set the state and make it re-render respectively."
taken from here.

In short, calling setState is safe and OK from componentWillMount(). However, it is not recommended to do subscriptions or asynchronous actions as those can cause additional rendering.
I think the current answer code should be updated to actually use componentWillMount() (currently its componentDidMount()) and in the code block display an example that does not use asynchronous actions- as those are not recommended.

I hope this was helpful.

[sudheerj]

Thanks for the details @AnandKumarJha and @KateDK. This question didn't say that "It is not safe to use setState() inside componentWillMount" but talks about not recommended to use in async initialization in componentWillMount(). That's why I mentioned componentDidMount instead of componentWillMount.

I updated the answer in the first sentence as "Yes, it is safe to use setState() in componentWillMount" to avoid confusion. Please let me know for any concerns.