set initial react component state in constructor or componentWillMount?

51
votes

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});
  }
}
1
reactjs
stackoverflow.com/questions/38137740/… - Asaf David

1 Answers

76
votes

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() {
    ....
  }
}