Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

set initial react component state in constructor or componentWillMount?

Tags:

reactjs

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});
  }
}
like image 509
freedrull Avatar asked Jun 13 '16 05:06

freedrull


People also ask

What is the best place to initialize state in React?

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.

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

componentWillMount() Safe to use setState ? Yes! In componentWillMount we can access the initial props and state that is defined in the constructor here.

When should I use componentWillMount?

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.

How do you set state to initial state in React?

To reset a component to its initial state: When an event occurs, call the setState() function, passing it the initial state.


1 Answers

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() {
    ....
  }
}
like image 118
ctrlplusb Avatar answered Oct 23 '22 14:10

ctrlplusb