Question: observable array push does not react.

[HwangTaehyun]

Hi, I use mobx everyday!

Recently, I don't understand following autorun's working logic. Please help me..

import { autorun, observable, makeAutoObservable } from 'mobx'

class Message {
    title
    author
    likes
    constructor(title, author, likes) {
        makeAutoObservable(this, {likes: observable.shallow})
        this.title = title
        this.author = author
        this.likes = likes
    }

    updateTitle(title) {
        this.title = title
    }

    pushLikes(item) {
        this.likes.push(item);
    }
}

let message = new Message("Foo", { name: "Michel" }, ["Joe", "Sara"])

autorun(() => {
    console.log(message.title)
})

autorun(() => {
    // case (1) is called
    console.log(message.likes.slice())
    // case (2) is called
    message.likes.map((item)=>{
        console.log(item);
    })
    // case (3) is not called
    console.log(message.likes);
})

message.pushLikes("Taehyun");

I expect that when I call Message class's "pushLikes" method then (3) should be called because Message class's likes array is observed by shallow strategy.

I understand shallow observe means that tracking whether observable array's each item's reference has changed or new item is added.

Why does not case (3) react?

Maybe this has sth to do with below. (https://mobx.js.org/understanding-reactivity.html)

Changing the question, how should I use the observe step of an observable array in what situations?

Thank you for reading my question!!

[danielkcz]

Please, can you provide runnable reproduction? It's kinda to understand what's wrong.

[HwangTaehyun]

Sorry. It seems that the comment was wrong in the middle and it could not be executed. Now the code is running.

[mweststrate]

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

…

On Fri, Jan 22, 2021 at 2:14 AM Taehyun Hwang ***@***.***> wrote: Hi, I use mobx everyday!. Recently, I don't understand following autorun's working logic. Please help me.. import { autorun, observable, makeAutoObservable } from 'mobx' class Message { title author likes constructor(title, author, likes) { makeAutoObservable(this, {likes: observable.shallow}) this.title = title this.author = author this.likes = likes } updateTitle(title) { this.title = title } pushLikes(item) { this.likes.push(item); }} let message = new Message("Foo", { name: "Michel" }, ["Joe", "Sara"]) autorun(() => { console.log(message.title)}) autorun(() => { (1) // is called console.log(message.likes.slice()) (2) // is called message.likes.map((item)=>{ console.log(item); }) (3) // is not called console.log(message.likes);}) message.pushLikes("Taehyun"); I expect that when I call Message class's "pushLikes" method then (3) should be called because Message class's likes array is observed by shallow strategy. I understand shallow observe means that tracking whether observable array's each item's reference has changed or new item is added. Why (3) does not react? Thank you for reading my question!! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2738>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBCFDKCP5E6ZRLSBNQLS3DNP7ANCNFSM4WNZXIVQ> .

[HwangTaehyun]

My question is, if the observable array of the mobx store is shallow observable, I think the following action function should react when i push data to the observable array.

autorun(() => {
    console.log(message.likes)
})

The common pitfall docs said this wasn't working, but I'm curious why it didn't work for a shallow observable array.

The meaning of shallow observe is to see whether the reference of items has changed with respect to the first depth, and when the item is pushed, there is a change in the first depth, so I thought that a reaction should occur of course.

Thank you.

[mweststrate]

the only observable used in that autorun is the "likes" property of "messages". That isn't modified as it point to the same thing, so no reaction. If you would be using the "length" property of "likes", and you add an item, that does cause the "length" to change, so you get a reaction. Etc. Autorun reacts to the observables you actually read

[HwangTaehyun]

Thank you for your explanation. There seems to be something I was wrong about shallow observable. I need to study in more detail. Thank you.