How are observables used in observed function detected?

[kfrajtak]

Hi,

this is not an issue, but a question. In the documentation, you are saying

Reactions are functions, which use observables. They can be created with the observe function and they are automatically executed whenever the observables - used by them - change.

I read this post and looked into the code, but was not able to find out how the observables used in observed functions are detected. When I have used a similar approach in C# it involved AOP tool and analyzing the code of the method.

Are all observers executed whenever any observable changes? Or you trigger the function and detect which observables are read?

Thanks for clarification,

Karel

[solkimicreb]

Hi! Yeah that post is a bit outdated, I will update or remove it. This one gives you a clearer overview, but it is written for React Easy State. I think it still explains the reactivity.

Everything happens at runtime and observers are only executed when a value - they use - changes. The Observer Util saves and queries (object, property, reaction) relations. These are enough to schedule a reaction for re-run when a property of an object (observable) - used inside the reaction - changes.

The currently running reaction is saved in a global flag (observe is responsible for this). Accessed or mutated object properties are tracked by ES6 Proxies (courtesy of observable). I hope this helped a bit, the article I linked at the beginning does a better job 🙂

[kfrajtak]

If I understand it correctly, it only works in connection with render method - on first call the list of used observables is created and this information is used later to call render method again (rerender).

Then it raises a question - what if there is an observable not detected during the first call of render method because there is if condition or a more complicated logic?

[solkimicreb]

Every run of the reactions are observed, not just the first one. The relations are totally wiped before every run of the render and then reconstructed during the run. The reactive wiring of conditional branches - hidden by if or a loop for example - are dynamically teared down and rediscovered. This might seem like an expensive thing, but in reality it was the fastest solution.

Also the post is a bit misleading. It pretends like React Easy State is doing the heavy lifting to lower the mental overhead. In reality this library (Observer Util) has nothing to do with React, it just has a tiny React port. Any function can be a reaction, not just React renders.

[kfrajtak]

So, on each run, the list of observables whose values were used is created and then whenever a value from this list is changed, something happens (component is rerendered, etc.). When there's an observable hidden by if then when the if input changes, the observable is "discovered".

Still, I am wondering how the list of observables used in the function is created, when the function is not called.

This is the example on the main page of the project

import { observable, observe } from '@nx-js/observer-util'

const counter = observable({ num: 0 })
const countLogger = observe(() => console.log(counter.num))

// this calls countLogger and logs 1
counter.num++

How the list is "inferred" from observe(() => console.log(counter.num))?

Thanks (I might be still missing something).

[solkimicreb]

Reactions are executed once synchronously right after they are passed to observe. This is controlled by the lazy option of observe. You can read more about it in this docs section.

Sorry for hiding this so badly 😄 In the last version this fact was more apparent from the docs, I will move this info to a more visible place.

[kfrajtak]

I see, now I understand that. Thanks.

Can I suggest to rename that method to something like observerAndTrigger which will make the functionality more obvious?