Observing nested composited value

[AvivonCtrl]

Given the following snippet inside a superObject:

class SuperObject {
   this.myFields = []
   nestedObject = new NestedObject({myNestedFields: this.myFields})
}

Alongside an observer component that is rendering superObject.nestedObject.myNestedFields

I update the super model (superObject, the model that composites nestedObject in itself) like so ->

this.myFields = [{"name":"test"}]

Which allegedly also changes the inside model's myNestedFields -- I would expect the component to re-render and to be aware of the top-level changes that also propagates to the composited nestedObject, however - it is not the case.

Is this the expected behavior or am I missing something fundamental? Feels to me like an OOTB, regular observation use-case.

Should be noted I solved it using the reaction approach which I'm less fond of and am looking for a better way:

this.fieldsDisposer = reaction(
      () => this.myFields,
      (myFields) => {
        this.nestedObject.setFields(...myFields);
      },
    );|

[mweststrate]

Did you check https://mobx.js.org/understanding-reactivity.html and the difference between autorun and reaction?

The object model you are describing is a bit hard to follow, I recommend to create a code sandbox instead to clarify your problem.

[AvivonCtrl]

Yep, I'm claiming the reaction approach works for me, but I'd rather opt for a solution without it.
I'll try making it as-pseudo-as-possible cause it can be exemplified in 3 rows:

class SuperObject {
   this.myFields = []
   nestedObject = new NestedObject({myNestedFields: this.myFields})
   this.myFields = [1, 2, 3]
}

In this case, observing myNestedFields does not cause a re-render.

[urugator]

this.myFields = [1, 2, 3] does not modify myNestedFields (you can check this out by simply printing the content of myNestedFields after the assigment), so why it should re-render?
You can modify the array itself, eg this.myField.replace([1,2,3])

[AvivonCtrl]

Assuming this.myFields is a getter that manipulates this.foo, running this.foo.replace([1,2,3]) still doesn't propagate.

[AvivonCtrl]

Ended up solving it by passing this to the nested object rather than the array :)

[mweststrate]

There are no observables. Or observers. We can't advice on what you might be doing wrong without some code showing what you actually do.

…

On Mon, 18 Jul 2022, 10:24 Avivon, ***@***.***> wrote: Yep, I'm claiming the reaction approach works for me, but I'd rather opt for a solution without it. I'll try making it as-pseudo-as-possible cause it can be exemplified in 3 rows: class SuperObject { this.myFields = [] nestedObject = new NestedObject({myNestedFields: this.myFields}) this.myFields = [1, 2, 3]} In this case, observing myNestedFields does not cause a re-render. — Reply to this email directly, view it on GitHub <#3468 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBA7T4R7MPRKF2H4DH3VUUPDTANCNFSM532ACJPA> . You are receiving this because you commented.Message ID: ***@***.***>