Different ways to initialize the state in ReactJS

Question

It might be because of the speed that ReactJS is developing, or just some mis-information, but when reading articles about how to set the state, I usually come across different ways.

In the constructor

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { ... }
    }
}

Directly in the class

class MyComponent extends React.Component {
    state = { ... }
}

In ComponentWillMount

class MyComponent extends React.Component {
    ComponentWillMount() {
        this.state = { ... }
    }
}

This diversity of options confuses me often, and makes it hard for me to decide how I should set the state in my components.

My question is: Is there any difference between these methods to set the state? If so, what are the advantages and disadvantages of each?

Possible duplicate of [Is it better to define state in constructor or using property initializers?](https://stackoverflow.com/questions/37788342/is-it-better-to-define-state-in-constructor-or-using-property-initializers) — JJJ, Oct 07 '18 at 12:46
@JJJ Not a dupe, just related. It doesn't cover componentWillMount. — Estus Flask, Oct 07 '18 at 12:57

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

These are all basically the same thing, just syntactic sugar.

In the constructor

This is the "normal" standard way to attach a property to a class instance.

Directly in class

This is just a syntactic sugar and this is the class fields proposal which is in stage 3 at the moment (01/10/18). you will need babel/plugin-proposal-class-properties

In ComponentWillMount

Same as the constructor version but inside a life-cycle method of react (which is deprecated by the way).

score 0 · Answer 2 · answered Oct 07 '18 at 12:48

0

You should now componentWillMount is deprecated and you should not use it. as for setting the state in the constructor or as class property is the same you can use either, I prefer the class property.

answered Oct 07 '18 at 12:48

Tarek Essam

3,602
2
12
21

score 0 · Answer 3 · answered Oct 07 '18 at 12:49

This is class field proposal:

class MyComponent extends React.Component {
    state = { ... }
}

It is syntactic sugar for:

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { ... }
    }
}

The former is shorter and can be considered preferable in transpiled React application because of its brevity, unless there's a need for explicit constructor.

ComponentWillMount lifecycle hook was renamed to UNSAFE_componentWillMount and deprecated in favour of constructor:

UNSAFE_componentWillMount() is invoked just before mounting occurs. It is called before render(), therefore calling setState() synchronously in this method will not trigger an extra rendering. Generally, we recommend using the constructor() instead for initializing state.

Different ways to initialize the state in ReactJS

In the constructor

Directly in the class

In ComponentWillMount

3 Answers3

In the constructor

Directly in class

In ComponentWillMount