I’m not really expert about react to know how does it find when a state is changed.
I had one similar issue(I hope OP keeps the faulty code alive), but this is about array, which got new items on it. We realized the react here doesn’t go deep, and tend to check with object reference(pointer), and shallow copy to go for a new render, or better just state reference.
As You mentioned Mr. Dawson
If you change the decrease method to following(your point):
decrement() {
this.state.count--;
// this.setState({count: (this.state.count-1)})
console.log(this.state);
}
And try some decrease, you see no render.
Once there is a increment, sine increment creates a object, rather change the value of state, so render is triggered, and latest result is on.
this is what I think react looks for state reference, rather deep diff(or value(s) signature)(but shallow), but I think this is fair since state could be in any scheme, and checking properties and values to find the diff could be hard way.
I don’t know, but maybe there is some explicit way to force a new render, or primitive like state rather than object.(sorry for lack of knowledge)