Is there a way to trigger the re-rendering of a stencil component when the mobx store change?
Actually the only way to integrate the twos is to put an autorun() in every component’s constructor
and maps local @State() variables to the mobx/store observables
i.e.
@State() loading: boolean = false;
constructor() {
autorun(() => {
console.debug('- PageStart autorun', toJS(GeneralStoreInstance) );
this.loading = GeneralStoreInstance.loading;
});
}
my 2cents… seems like trying to force application state mgmt into a web component library is too much.
Probably should just focus on the web components first, then what ever framework you want to use (react, angular, or etc) you can let that framework handle passing the props down to the web component.
But to your original point, stencil will trigger a rerender on @State and @Prop properties when the value is redefined. My guess is that mobx does not reset the value, but mutates it?
Honestly i don’t want to use frameworks because Stencil is WAY BETTER 
I already have a few PWA in production with Stencil + Ionic (the only thing terribile is the Router) or Stencil + custom css components.
The code above is a working example sorry probably I explained myself not correctly.
What I am looking for if the above is the correct way to integrate mobx and stencil. actually there is no articles on medium or whatever about this.
I know that stencil has some kind of redux like library but i’ve used mobx for years in react and it will be easier for my use case to keep running onto the mobx logic when porting old apps to stencil.
A bit subjective, but moving on…
A quick google gives me an example project from @aaronksaunders
which could give you some ideas.
yes this is exactly the only resource available on this topic and its where i borrowed the trick to use autorun() and to map mobx observable to state variabiles.
OFC i only use autorun() into page components and then propagate to child components only via @props
for instance autorun() also should be disposed when the component unMount. I wonder if disconnectedCallback is the right point.
It was too much a pain to use Mobx: expecially handling special cases into callbacks (when using socket.io and other libs).
I gaved up and re-implemented everything using RXJS and BehaviorSubject. This way I don’t have the ugly autorun() in the constructor and everythings work correctly.