set initial react component state in constructor or componentWillMount?

Reactjs

Reactjs Problem Overview


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});
  }
}

Reactjs Solutions


Solution 1 - Reactjs

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionfreedrullView Question on Stackoverflow
Solution 1 - ReactjsctrlplusbView Answer on Stackoverflow