34

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?

3 Answers 3

23

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.

6

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'
  }
}
2
  • 1
    Apparently this isn't valid any more. I suceed to assign props value to the state directly in the class state = { time: this.props.time, }; Commented Jan 14, 2019 at 11:37
  • Adding a prop to the state is usually considered an anti pattern: reactjs.org/docs/react-component.html#constructor. Unless you want to derive state explicitly
    – Remi
    Commented Jul 22, 2019 at 9:11
1

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.

2
  • "Class Fields keeps a copy of anotherThing in each one of your instances" isn't that what a constructor also does?
    – vikrant
    Commented Feb 26, 2019 at 9:13
  • 1
    Hi @vikrant! Your question derives from OOP inheritance (like in Java) if I understood it correctly. In Java, Constructors does indeed create anotherThing for each instance. In Javascript, things behave "slightly" different. The prototype chain keeps a reference to anotherThing for each instance, which makes them lightweight & lean. A great book series (by Kyle Simpson) sheds some light over the bare bones of Javascript fundamentals. I highly recommend you to read this section specifically: github.com/getify/You-Dont-Know-JS/blob/master/…
    – Tomer
    Commented Feb 26, 2019 at 10:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.