Why I should not use forceUpdate() - reactjs

Question

For example I have a store:
class MyStore {
constructor() {
this.value = 1;
}
}
I need to get and change MyStore.value in a view.
I can do it:
class MyView extends React.Component {
constructor() {
super();
this.state = {
value: MyStore.getValue()
};
}
And change it:
userClick() {
this.setState({value: MyStore.changeValue('newValue')});
}
Or change value in a store and call emit.
But I can do it with forceUpdate():
render() {
const value = MyStore.value;
return (
<div>{value}</div>
)
}
And change it:
userClick() {
MyStore.value = 'newValue';
this.forceUpdate();
}
Why is it bad?

Answer 1

I don't think there is anything wrong in what you are trying to do. You are "just" following basic OO-rules and are encapsulating your data.
Actually I don't understand why most basic React examples don't introduce this pattern, instead of mixing data and presentation. Usually you don't see stuff like stores before you reach examples involving, Flux, Redux or MobX (which I think is the way for you to go).
I have rewritten your example in this codepen to use getters and setters and I'm using the observer pattern to notify when data has changed.
I would claim that this (remember it's a quick demo) is a perfectly OK way to use forceUpdate().
class MyView extends React.Component {
constructor(props) {
super(props);
this.props.store.setObserver(this);
}
changed(){
this.forceUpdate();
}
render() {
return (
<div>
<button onClick={()=>this.props.store.value = Math.random()}>Change</button>
<p>{this.props.store.value}</p>
</div>
)
}
}
class MyStore {
constructor() {
this._value = 1;
}
get value() {
return this._value;
}
set value(val) {
console.log(val);
this._value = val;
this._observer.changed();
}
setObserver(observer){
this._observer = observer;
}
}
Actually this is what the mobX library is doing under the surface. It provides you with automatic listener-capacities, and if this is the way you plan to go I definitely advice you to take a look at this library.
It will handle all the "observer" details, including forceUpdate() automatically (it does not use forceUpdate, but calls your render() method when an updata is required).
With mobX the example boilds down to (using a functional component, since it does not need state)
var View = observer((props) => (
<div>
<button onClick={()=>props.store.value = Math.random()}>Change</button>
<p>{props.store.value}</p>
</div>
)
)
class MyStore {
#observable value =1;
get value() { return this._value; }
set value(val) { this._value = val; }
}
Se live demo on codepen.io