deepObserve vs toJS

[TechAkayy]

Hi all, I'm new to Mobx.

I'm trying to get my head around the difference between mobx-utils/deepObserve and using toJS in autorun. toJS should let us detect all the changes to an object. How is deepObserve different and in what instance?

import { deepObserve } from "mobx-utils";
import { observable, action, toJS, autorun } from "mobx";

const myList = observable({
    fruits: {
        name: "apple",
        quantity: 10,
        varities: [
            {
                color: "green",
            },
            {
                color: "red",
            },
        ],
    },
});

deepObserve(myList, (change, path, root) => {
    console.log(myList);
    // console.log(change);
});

autorun(() => {
    console.log(toJS(myList));
});

const myAction = action((myList) => {
    myList.fruits.varities[0].color = "orange";
});

myAction(myList);

[urugator]

If you modify multiple properties in action it will result in multiple invocations of deepObserve vs single invocation of autorun.

Could help: #1207 (comment)

[TechAkayy]

Thanks a bunch!

[mweststrate]

also toJS deepclones clones the entire object, which can be overkill and even confusing, unless you need a deep defensive copy.

…

On Wed, Dec 1, 2021 at 12:51 PM akkayy ***@***.***> wrote: Thanks a bunch! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#3208 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBCSJYCGYQDAZT6GZ2DUOYK63ANCNFSM5JDQW6WQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.