What is the difference between using constructor vs state = {} to declare state in react component?

Question

I found there is two way to declare state in class component like below

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'John'
        }
    }

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

}

and

class App extends Component {
    state = {
       name: 'John'
    }

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

}

What is the difference between these two?

Answer 1

They are roughly equivalent. The significant difference is that the initializer in the second example is executed before constructor.

The second approach uses class fields proposal.

It is not a part of ECMAScript standard yet so you need to set up transpiler properly to use the second approach.

UPD Take a look at Babel output to better understand how public instance fields work.

Answer 2

When you add a method to a class, its actually being added to the function’s prototype. like so:

class Same{
  thing() {}
}

// Equivalent to:

function Same() {}
Same.prototype.thing = function () {}

thing is defined once and shared across all instances of the class.

If you refactor it to use Class Fields as follow:

class Animal {
  thing() {}
  anotherThing = () => {} // Class Field
}

// Equivalent to:

function Animal () {
  this.anotherThing = function () {}
}

Animal.prototype.thing = function () {}

anotherThing is defined on each of newly created instance rather on the prototype.

Development Experience vs Performance

Its a trade-off you should consider. Class Fields makes your code looks readable and clean. However, Class Fields keeps a copy of anotherThing in each one of your instances.

Therefore, you should carefully think if you want to use them.

Answer 3

Use the constructor when you want to save props data into state

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      name: 'John'
    }
  }
}

Otherwise you can directly set the state for hard coded data

class App extends Component {
  state = {
    name: 'John'
  }
}