do I have to use this.state in React to maintain component state?

Question

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?

Answer 1

this.state plays a larger role than you realize.

Setting state via this.setState triggers the component to re-render (among other things). Otherwise, React would have no way of knowing when something it depends on changed.