autorun doesn't detect change in the prop of nested object

[sashanovoseltsev]

Hello. I'm sorry for raising question about monitoring of nested props, but after reading through several discussions and also docs the reality still doesn't correlate with my understanding.

Could please somebody explain to me why in logs I only see message about update of 'topLevelProp', but not 'deepLevelProp'.
Thanks in advance!

Console logs:

autorun updateDeepLevelProp act0
autorun topLevelProp false
autorun topLevelProp true

class Activity2 {
  name: string = 'act0';
}

class InnerStore {
  objectProp: Activity2 = new Activity2();
  topLevelProp: boolean = false;

  constructor() {
    makeAutoObservable(this);
  }

  updateDeepLevelProp = () => {
    this.objectProp.name = 'act1';
  }

  updateTopLevelProp = () => {
    this.topLevelProp = !this.topLevelProp;
  }
}

const store1 = new InnerStore();

autorun(() => console.log('autorun updateDeepLevelProp', store1.objectProp.name));
autorun(() => console.log('autorun topLevelProp', store1.topLevelProp));

store1.updateDeepLevelProp();
store1.updateTopLevelProp();

[mweststrate]

Activity2's props aren't marked observable https://mobx.js.org/observable-state.html#non-convertibles

…

On Sun, 27 Aug 2023, 22:53 sashanovoseltsev, ***@***.***> wrote: Hello. I'm sorry for raising question about monitoring of nested props, but reading through several discussions and also docs the reality doesn't correlate with my understanding. Could please somebody explain to me why in logs I only see message about update of 'topLevelProp', but not 'deepLevelProp'. Thanks in advance! Console logs: autorun updateDeepLevelProp act0 autorun topLevelProp false autorun topLevelProp true `class Activity2 { name: string = 'act0'; } class InnerStore { objectProp: Activity2 = new Activity2(); topLevelProp: boolean = false; constructor() { makeAutoObservable(this); } updateDeepLevelProp = () => { this.objectProp.name = 'act1'; } updateTopLevelProp = () => { this.topLevelProp = !this.topLevelProp; } } const store1 = new InnerStore(); autorun(() => console.log('autorun updateDeepLevelProp', store1.objectProp.name)); autorun(() => console.log('autorun topLevelProp', store1.topLevelProp)); store1.updateDeepLevelProp(); store1.updateTopLevelProp();` — Reply to this email directly, view it on GitHub <#3745>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBF4Z6IAAM2X6CBO3RDXXOXUFANCNFSM6AAAAAA4AROA3E> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[sashanovoseltsev]

Thank you! Now I understand why my scenario worked when Activity2 was an interface not class.