Why some people use state instead of this.state when defining a React component?

Question

I saw different examples where some people use state while others use this.state. I still don't understand when to use what. In examples using Mapbox or Meteor I only see this.state.

ex1:

export default class SomeComponent extends Component {
    state = { someState }
    render() {
        return (
          <Something-to-render-that-uses-state>
        );
    }
}

ex2:

export default class SomeComponent extends Component {
    constructor(props) {
        super(props);
        this.state = { someState }
    }
    render() {
        return (
          <Something-to-render-that-uses-state>
        );
    }
}

score 0 · Answer 1 · answered Jun 04 '18 at 07:31

when you define a variable in class as Object class property initialized, you don't need to make use of this keyword, simply writing state = { someState } is enough, However if you want to define a class variable in a function or a constructor, you need to make use of this keyword to specify what scope the variable belongs to

export default class SomeComponent extends Component {
    constructor(props) {
        super(props);
        this.state = { someState }
    }

    render() {
        return (
          <Something-to-render-that-uses-state>
        );
    }
}

score 0 · Answer 2 · answered Jun 04 '18 at 07:34

The state = {} declaration is a class property, which is currently not part of the JavaScript language. Certain utilities such as Babel will compile this into legal JavaScript code.

So it's exactly the same thing. Take a look at the JavaScript that babel transpiles the code into. There is no difference.

Why some people use state instead of this.state when defining a React component?

2 Answers2