In react components is it preferred to set the initial state in the constructor() or componentWillMount()?
export default class MyComponent extends React.Component{
constructor(props){
super(props);
this.setState({key: value});
}
}
or
export default class MyComponent extends React.Component{
componentWillMount(props){
this.setState({key: value});
}
}
Initialize State in the Constructor As we discussed earlier constructor is the first method to be called when React instantiates the class. This is the perfect place to initialize the state for the component because the constructor is called before the React renders the component in the UI.
componentWillMount() Safe to use setState ? Yes! In componentWillMount we can access the initial props and state that is defined in the constructor here.
This method is called during the mounting phase of the React Life-cycle. ComponentWillMount() is generally used to show a loader when the component is being loaded or when the data from the server is being fetched.
To reset a component to its initial state: When an event occurs, call the setState() function, passing it the initial state.
In the constructor is preferable when using ES6 classes, but don't use the setState
API, rather do like so:
export default class MyComponent extends React.Component{
constructor(props){
super(props);
this.state = { key: value };
}
}
Also, if you have class properties available to you (babel stage 1) then you can do the following:
export default class MyComponent extends React.Component{
state = { key: value };
render() {
....
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With