What is the difference between React component instance property and state property?

Question

Consider the below example

class MyApp extends Component {
    counter = 0;
    state = {
        counter: 0
    };
    incrementCounter() {
        this.counter = this.counter + 1;
        this.setState({
            counter: this.state.counter + 1
        });
    }
    render() {
        return <div>
            <p>{this.counter} and {this.state.counter}</p>
            <button onClick={this.incrementCounter}>Increment</button>
        </div>
    }
}

When I click the button I see both this.counter and this.state.counter are showing the incremented value

My question is why I have to use state? though react is capable of re-rendering all the instance properties

counter = 0;
incrementCounter() {
    this.counter = this.counter + 1;
    this.setState({});
}

In above snippet, just calling this.setState({}) is doing the trick, then why should I use this.state property for storing my component state?

Answer 1

state and instance properties serve different purposes. While calling setState with empty arguments will cause a render and will reflect the updated instance properties, state can be used for many more features like comparing prevState and currentState in shouldComponentUpdate to decide whether you want to render or not, or in lifecycle method like componentDidUpdate where you can take an action based on state change.

state is a special instance property used by react to serve special purposes. Also in setState, state updates are batched for performance reasons and state updates happen asynchronously unlike class variable updates which happen synchronously. A class variable won't have these features.

Also when you supply a class variable as prop to the component, a change in this class variable can't be differentiated in the lifecycle methods of the child component unless you are creating a new instance of the variable yourself. React does it with state property for you already.