Mobx: Q: How does autorun track the function and finds the observables references?

[bichotll]

Hi there. I feel I'm missing something.
How does mobx.autorun find the references of the observables used by the passed function?

I checked the source code and I couldn't figure it out by myself unfortunately.

Can some make 2 cents of how autorun knows that the passed function has a method that calls an observable?

So, giving this example:

//Clear - This is creating a proxy
let message = observable({
    title: "Foo",
});

// How does autorun that message.title is being read inside this passed function?
autorun(() => {
    console.log(message.title)
})

// This triggers the set function of the proxy and notifies mobx
message.title = "Bar"

Thanks

[urugator]

Each property hides an "atom" object.
Global state has a reference to currently running derivation (autorun/reaction/computed).
Property getter(mobx4) or proxy handler(mobx5) then associates current derivation with the underlying atom.

Note line 38 (.get())
https://github.com/mobxjs/mobx/blob/ec011d5e18626610dd1148827cd357a77eb34bc9/src/types/dynamicobject.ts#L32-L46

Note line 122 (this.reportObserved())
https://github.com/mobxjs/mobx/blob/ec011d5e18626610dd1148827cd357a77eb34bc9/src/types/observablevalue.ts#L121-L124

Note passing itself (reportObserved(this))
https://github.com/mobxjs/mobx/blob/ec011d5e18626610dd1148827cd357a77eb34bc9/src/core/atom.ts#L53-L59

Note line 144 - observable value (atom) is added as dependency to current derivation
https://github.com/mobxjs/mobx/blob/ec011d5e18626610dd1148827cd357a77eb34bc9/src/core/observable.ts#L133-L155

[bichotll]

Right, so from what I understood, autorun is running the function once.
This way, the reference to that function and the observables is saved in mobx. Then mobx can invoke that function whenever the observables used by that function are being changed their values.

From what I read here:
"MobX reacts to any existing observable property that is read during the execution of a tracked function."
https://github.com/mobxjs/mobx/blob/gh-pages/docs/best/react.md#mobx-only-tracks-data-accessed-for-observer-components-if-they-are-directly-accessed-by-render

Otherwise, a reaction can also be used for the same similar case, but declaring what observables will be used in the function.

I think that concludes it. I missed that part for some reason, but now everything is clear.
Thanks, I'm closing this.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.