What will happen if I use setState() function in constructor of a Class in ReactJS or React Native?

What setState essentially does is to run a bunch of logic you probably don't need in the constructor.

When you go state = {foo : "bar"} you simply assign something to the javascript object state, like you would any other object. (That's all state is by the way, just a regular object local to every component).

When you use setState(), then apart from assigning to the object state react also rerenders the component and all its children. Which you don't need in the constructor, since the component hasn't been rendered anyway.

Error Message would be Uncaught TypeError: Cannot read property 'VARIABLE_NAME' of null

Please see the following two jsfiddle snippets.

Case 1) Working solution jsfiddle

class Hello extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        name: 'world'
      } 
    }

  render() {
    return <div>{this.state.name} </div>
  }
}

ReactDOM.render(<Hello />, document.getElementById('container'));

Case 2) Not working solution

class Hello extends React.Component {
    constructor(props) {
      super(props);

      this.setState({
        name: 'hello'
      });
    }

  render() {
    return <div>{this.state.name} </div>
  }
}

ReactDOM.render(<Hello />, document.getElementById('container'));

This happens: -constructor (starts setState) -render (fails - because state has no property 'name' yet) -name is added to state (but too late - it has already rendered)

Conclusion:

My rule of thumb, inside constructor uses this.state = {} directly, other places use this.setState({ });