I am unclear about the use of `this.state` in React components. While I can create `this.state.myvar`, why should not I just create `this.myvar`?

```
class MyComponent extends Component {
    state = {myvar: 123};

    render() {
        return <span>{this.state.myvar}</span>;
    }
}

```

or

```
class MyComponent extends Component {
    myvar = 123;

    render() {
        return <span>{this.myvar}</span>;
    }
}

```

I realize that there are helpers like `this.setState`, but at the end `this.state` is just a convenience, right? Or does it play a bigger role in React? Should I avoid setting properties directly on `this` to store my state? If so, why?