How does observer HoC work?

[inf3rnus]

Hi, love mobx, been using it for quite a while!

However, and I will dig through the code more to better understand, but could someone give me an overview of how the observer HoC works?

My general mental model is, mobx does its thing with actions, observables and computed properties via a store, and that there is a subscription model of sorts where when an action is performed, anything observing an observable is subscribed to such that you can specify a handler that is executed anytime an observable's state changes. E. G. reaction().

But how does mobx know what properties of an observable object are rendered, and how does it leverage react's api so that the child component renders with the updates from the store?

I get that with an HoC you could theoretically, in its body, perform renders of the child component via anything listening to an observable w/ a setstate call. I don't actually know how that's handled and would love more details.

The other thing that perplexes me to some extent is, how does the HoC know what props from a store are being observed?

Is that via the lower level react api? I'm imagining calling the child func without putting it in the dom, looking at what's passed in as props by traversing the object that's returned and seeing if any of the props have info that ties them back to the store, and then by doing that creating a mechanism that only listens to the changes to those props within the parent component, calling setState whenever those change to get the child component to update.

Also, what is the purpose of everything being wrapped in a proxy? I have a feeling it has something to do with the aforementioned process...?

Anyway, I'll clean this question up in the morning, but any insight would be greatly appreciated!

[kubk]

Hi, I've created an article that describes how to build an oversimplified version of Mobx: https://teletype.in/@alteregor/mobx-50-loc
There is a codesandbox in the end of the article.
So Mobx doesn't use any low level React API. Proxy is used to modify observables without explicitly calling setters & getters (in the article they're used).

[inf3rnus]

Perfect! Well that almost exactly matched my mental model except for a few pieces, but it's nice to see something concrete using the pattern to fill in the gaps.

e.g. using a set to keep track of read observables when calling the child component simplifies things quite a bit, as far as subscribing to only the variables you're using goes, that really helped.

Thanks Egor, that was invaluable. I think I'll be able to fill in the gaps with Proxies by doing some experimentation on the side.

You get a double thumbs up from me! Thanks again 👍👍