How does computed tracks observable access in functions called inside it?

[Gr3q]

Basically, why/how does this work?

import { autorun, computed, makeObservable, observable, runInAction, trace } from "mobx";

function Test(vm: VM) {
    const hasDevices = vm.devices != null && vm.devices.length > 0;
    return {
        hasDevices: hasDevices,
    }
}

class VM {
    @observable
    devices: number[] | null = null;

    @computed
    get TestInfo() {
        const test = Test(this);
        trace();
        return test;
    }

    constructor() {
        makeObservable(this);
    }
}

const vm = new VM();

autorun(() => {
    console.log(vm.TestInfo.hasDevices)
})



runInAction(() => vm.devices = [1, 2, 3]);
// true
runInAction(() => vm.devices = null);
// false
runInAction(() => vm.devices = [1, 2, 3]);
// true

The output is:

[mobx.trace] '[email protected]' tracing enabled
false
[mobx.trace] '[email protected]' is invalidated due to a change in: '[email protected]'
true
[mobx.trace] '[email protected]' is invalidated due to a change in: '[email protected]'
false
[mobx.trace] '[email protected]' is invalidated due to a change in: '[email protected]'
true

[mweststrate]

Good starts: https://mobx.js.org/understanding-reactivity.html / https://hackernoon.com/becoming-fully-reactive-an-in-depth-explanation-of-mobservable-55995262a254

…

On Thu, Feb 29, 2024 at 3:41 PM Attila Greguss ***@***.***> wrote: Basically, why does this work? import { autorun, computed, makeObservable, observable, runInAction, trace } from "mobx"; function Test(vm: VM) { const hasDevices = vm.devices != null && vm.devices.length > 0; return { hasDevices: hasDevices, } } class VM { @observable devices: number[] | null = null; @computed get TestInfo() { const test = Test(this); trace(); return test; } constructor() { makeObservable(this); } } const vm = new VM(); autorun(() => { console.log(vm.TestInfo.hasDevices) }) runInAction(() => vm.devices = [1, 2, 3]); // true runInAction(() => vm.devices = null); // false runInAction(() => vm.devices = [1, 2, 3]); // true The output is: [mobx.trace] ***@***.***' tracing enabled false [mobx.trace] ***@***.***' is invalidated due to a change in: ***@***.***' true [mobx.trace] ***@***.***' is invalidated due to a change in: ***@***.***' false [mobx.trace] ***@***.***' is invalidated due to a change in: ***@***.***' true — Reply to this email directly, view it on GitHub <#3838>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBHLKPFC4BMHPHNUSFLYV463NAVCNFSM6AAAAABEACER2SVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZWGI4TENRQGQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[Gr3q]

Thanks, it seems I can't read, it was right there:

"during" means that only those observables that are read while the function is executing are tracked. It doesn't matter whether these values are used directly or indirectly by the tracked function. But things that have been 'spawned' from the function won't be tracked (e.g. setTimeout, promise.then, await etc).