Mobx store update when React props change - reactjs

Question

I'm creating a generic react component, I'm using mobx internally to control the component state. What I need to achieve is besides to keep all business logic in Store, when the user change the showSomething prop, the store should know it so fetchSomeStuffs runs and change anotherThing.
// Application using the component
#observer
class MyApplication extends React.Component {
#observable
showSomething = false;
changeThings = () => {
this.showSomething = true;
};
render() {
return (
<React.Fragment>
<button onClick={this.changeThings}>Change Show Something</button>
<MyComponent showSomething={showSomething} />
</React.Fragment>
);
}
}
class Store {
#observable
showSomething = false;
#observable
anotherThing = [];
#action
setShowSomething = value => {
this.showSomething = value;
};
// I'll dispose this later...
fetchSomeStuffs = autorun(() => {
const { showSomething } = this;
// Update some other stuffs
if (showSomething) {
this.anotherThing = [1, 2, 3];
} else {
this.anotherThing = [];
}
});
}
#observer
class MyComponent extends React.Component {
static propTypes = {
showSomething: PropTypes.bool
};
constructor() {
super();
this.store = new Store();
}
componentDidMount() {
const { setShowSomething } = this.store;
this.setSomethingDispose = autorun(() =>
setShowSomething(this.props.showSomething)
);
}
componentWillUnmount() {
this.setSomethingDispose();
}
render() {
return (
<Provider store={this.store}>
<MySubComponent />
</Provider>
);
}
}
#inject("store")
#observer
class MySubComponent extends React.Component {
render() {
const { showSomething, anotherThing } = this.props.store;
return (
<div>
MySubComponent
{showSomething && "Something is finally showing"}
{anotherThing.map((r, i) => {
return <div key={i}>{r}</div>;
})}
</div>
);
}
}
This is the way i found to achieve it, all the logic is in the Store and I use an autorun in the componentDidMount of my main component to always keep the showSomething variable of the store the same as the prop.
My doubt here is if this is a good practice or if there are better ways to do it?

Answer 1

Yes, there is a better way, using computed values.
One pattern is to use a private variable to hold the values and a computed value to expose what you want.
using this pattern you can implement list filters and all sorts of dynamic computations with a lot of agility, since MobX optimizes all computed values.
Just remember that to access a computed value you just have to read it as a property, not a function.
Ex:
// good
store.anotherThing
// bad
store.anotherThing()
class Store {
#observable
showSomething = false;
#observable
_anotherThing = [];
#action
setShowSomething = value => {
this.showSomething = value;
};
#computed get anotherThing() {
const { showSomething } = this;
// Update some other stuffs
if (showSomething) {
this._anotherThing = [1, 2, 3];
} else {
this._anotherThing = [];
}
}
}