Reacting to unobserved property (that has an obserevable)

[nsainaney]

Hi,
We moved from Mobx4 -> Mobx6 and I have been struggling with an infinite loop issue. My stores are as follows:

export class EntityStore {
   @observable entity = { }

   get(id) { ... performs fetch ... }
}

export class StatusStore extends EntityStore {

    constructor() {
        super('api/status')
        makeObservable(this)
    }
}


export class CommandstStore extends EntityStore {

    constructor() {
        makeObservable(this)
    }

    private _statusStore: StatusStore
    get statusStore() {
        if (this._statusStore) return this._statusStore

        this._statusStore = container.get<StatusStore>(Symbols.stores.statusStore)
        this._statusStore.get(this.id) // This performs a fetch from a remote server
        return this._statusStore
    }

export class CommandListStore extends EntityListStore {

  @observable entities = [] // entities can mutate if filters etc are applied and they are re-fetched

  @computed get entityStores() {
        if (this._entityStores) return this._entityStores
        this._entityStores = this.entities.map(entity => {
            const store = new CommandstStore()
            store.entity = entity
            return store
        })
        return this._entityStores
    }
    ....
}

It get a ton of:

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

When CommandListStore.entityStores[0].statusStore.entity is modified, the CommandsListStore is invalidated which makes no sense to me as CommandStore get statusStore() has no annotations. I can't use makeAutoObservable(this, { statusStore: false }) because of inheritance.

How do I explicitly have ComandStore/CommandListStore ignore modifications to StatusStore? I don't believe I had this issue in MobX 4.

[urugator]

When CommandListStore.entityStores[0].statusStore.entity is modified, the CommandsListStore is invalidated which makes no sense to me as CommandStore get statusStore() has no annotations.

Is CommandListStore.entityStores[0].statusStore.entity accessed during entityStores? If it is, the result of entityStores depends on it and therefore will recompute on change. If there is no annotation on statusStore it behaves as normal getter, it won't prevent tracking accessed observables...

How do I explicitly have ComandStore/CommandListStore ignore modifications to StatusStore?

You can disable subscriptions with untracked, but it's unlikely you actually want to do that.

There should be no difference between v4/v6 in this regard.

[nsainaney]

Ok so specifically:

entityStores = class CommandStore[]
statusStore = class StatusStore
CommandListStore [computed getter] .entityStores (uses observable entities[]) [vanilla getter] .statusStore (uses observable entity)

modifying statusStore.entity triggers observers on CommandListStore.entityStores

So

class CommandStoreList {
   @computed entityStores { 
          for(const es of this._entityStores) { es.dispose() } // disposes stale CommandStores
          return this.entities.map(e => new CommandStore(e) // creates new entityStores (and stashes in _entityStores not shown)
     }
}

class CommandStore {
     get statusStore { /* lazy loads from DI */ }
    dispose() {
        this.statusStore?.entity.endWatch() // <--- results in an infinite loop
    }
}

I either need to wrap the dispose function in a runInAction or mark it untracked. Is that correct?

[nsainaney]

I wrapped the dispose function in runInAction and the infinite loop stopped. Thanks for pointing me in the direction.

FYI, trace was a big help in figuring out what was going on.