Mobx: Private fields are not observed by makeAutoObservable

[Exelord]

Intended outcome:

class State {
  #name = undefined;

  get name() {
    return this.#name;
  }

  set name(value) {
    this.#name = value;
  }

  constructor() {
    makeAutoObservable(this)
  }
}

I expect to the private field to be observable

Actual outcome:

The private field is not observed. After updating it, getters that rely on them are not recomputed.

How to reproduce the issue:

Create a class with a private field and an accessor which depends on it.

https://codesandbox.io/s/charming-snowflake-h2t8r?file=/src/index.ts
Versions
^6

[mweststrate]

Private fields are not visible outside the class definition and cannot be annotated by MobX. I recommend To use private instead. Will make sure it is mentioned in the docs.

[FredyC]

@mweststrate But there is something weird because it breaks the behavior of that field. If you remove the makeAutoObservable you can read/write that field just fine, but with MobX in play, that field always stays undefined (reactivity aside). That is certainly confusing behavior.

[mweststrate]

Yes, that is correct, because the getter will be turned in a computed nonetheless by makeAutoObservable, and since it is observed, it will be cached (since the autorun observes it). So, TL,DR don't use makeAutoObservable if you use #private

[Exelord]

Thank you for so quick clarification! <3

So, TL,DR don't use makeAutoObservable if you use #private

I think It would be great to contain this in the doc as well :)

[brandon-marginalunit]

Is this the same case, or should I file a bug? Note that I'm not using the auto version, and I am using TypeScript's private and not #

[mweststrate]

See the docs, there is an section on TS privates on the page about
observables

On Thu, 22 Oct 2020, 19:44 brandon-marginalunit, [e-mail]
wrote:

Is this the same case, or should I file a bug? Note that I'm not using the
auto version, and I am using TypeScript's private and not #

[image: run-list-mobx_ts_—_muse-frontend]
https://user-images.githubusercontent.com/65309790/96916001-8f695300-146c-11eb-914a-2d098c4a1541.png

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx/issues/2521#issuecomment-714687399, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AAN4NBEDMNLLPHR3SG3CZ6LSMB4P5ANCNFSM4SUMGB4Q
.

[brandon-marginalunit]

Got it. Thanks!