Is ObservableArray.replace needed?

[roeycohen]

Hi there,

let's say i'm defining ObservableArray like this:
@observable arr = [];

in that case,
arr.replace(['a','b','c']);
seems to work exactly the same as
arr = ['a','b','c'];

Am I missing something? I was sure regular assignment would reset arr to native js array,

10x,
Roey

[danielkcz]

Can you show a reproduction of what have you tried? This clearly shows that it's not true.

https://codesandbox.io/s/dreamy-johnson-vi0xu?file=/index.js

[urugator]

Differently in which sense? Please post complete (ideally runnable) example, it's unclear what you're asking about.

[roeycohen]

Hi @urugator, as requested, a sample :)
https://codesandbox.io/s/mobx-decorators-forked-urx0h?file=/src/index.js

[mweststrate]

@roeycohen make sure you understand the difference between the property of an object, and the value you store in it. @observable makes the property of the object observable (and by extension any thing you store in it by default as well). observable.array gives you back an observable array, but doesn't make the property that array is stored into observable.

[roeycohen]

That makes sense @mweststrate... I'll have to take that into account if I ever decide to leave decorators behind...

[urugator]

It's not a feature of decorators, it's a feature of observable objects ... the decorator is just one of the ways of making object observable, eg observable({ arr: [] }) also returns observable object with observable prop arr, while { arr: observable([]) } is non-observable object with non-observable prop arr holding observable array...

[urugator]

The first case will invalidate arr observers, while the second case will invalidate object.arr observers.

const Parent = observer(({ object }) => {
  console.log("render Parent");
  return <Child arr={object.arr}/>
})

const Child = observer(({ arr }) => {
   console.log("render Child")
   return <ul>{arr.map(el => <li>{el}</li>)}</ul>
})

With arr.replace([]) only Child will re-render.
With object.arr = [] both Parent and Child will re-render.

See https://mobx.js.org/understanding-reactivity.html#understanding-reactivity

[roeycohen]

understood :) still doesn't really answer my initial answer...

[urugator]

It answers your initial question "Is ObservableArray.replace needed?"

[mweststrate]

One example replaces the arr property of the object, the other one changes the array that is stored in it. replace is just a splice short hand. The difference is exactly the same as:

const obj = {
   arr: [1,2,3]
}
const theArray = obj.arr

obj.arr = [4,5,6]
console.log(theArray) // prints 1,2,3

// versus
obj.arr.splice(0, 3, 4,5,6)
console.log(theArray) // prints 4,5,6

By changing only the array, and not the object, mobx will be slightly better able to optimize the changes if all other things are equal. But as demonstrated in the example above there is a semantic difference between the two, and it might depend on your coding patterns what you need. Generally I mark these kind of fields as readonly in typescript to avoid confusion and force replace usage.

[mweststrate]

The same can be achieved without decorators, just use makeObservable. See the docs for more info. .

…

On Mon, Feb 8, 2021 at 1:17 PM Roey ***@***.***> wrote: That makes sense @mweststrate <https://github.com/mweststrate>... I'll have to take that into account if I ever decide to leave decorators behind... — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2791 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBEAY7O3EGXEELUVMBLS57P5ZANCNFSM4XINKJFQ> .

[roeycohen]

I guess this means replace & clear are useful only on specific cases, when not using decorators or makeObservable.

10q @mweststrate

[urugator]

No that absolutely doesn't matter. Any time you want to change content of an observable array you should prefer replace/clear/splice for the reasons already state above - your observers can depend on 2 different things - observable object or observable array - if you change the object (obj.arr = []) only the object observers are notified, if you change the array arr.replace([]) only the array observers are notified.
Object can be made observable in different ways - @observable, extendObservable, observable, decorate(v4), makeObservable(v6)

[roeycohen]

ok, I think I understand better now.

[roeycohen]

thank you all guys for you time!!