Why does property destructuring work here?

[kubk]

I am used to think that JS destructuring shouldn't be used with Mobx, because Mobx tracks property access, not values. For example this code will not react:

let { title } = message
autorun(() => {
    console.log(title)
})
message.updateMessage("Bar")

I am wondering why does this example work: https://codesandbox.io/s/busy-https-o3jyd?file=/src/App.js
When I switch from a class store to a functional one it stops to work: https://codesandbox.io/s/dazzling-bash-oht7o?file=/src/App.js

[mweststrate]

See https://mobx.js.org/understanding-reactivity.html, you're example is quite literally in there

…

On Thu, Nov 19, 2020 at 3:19 PM kubk ***@***.***> wrote: I used to think that JS destructuring shouldn't be used with Mobx, because Mobx tracks property access, not values. For example code will not react: let { title } = messageautorun(() => { console.log(title)})message.updateMessage("Bar") I am wondering why this example does work: https://codesandbox.io/s/busy-https-o3jyd?file=/src/App.js When I switch from a class store to a functional one it stops to work: https://codesandbox.io/s/dazzling-bash-oht7o?file=/src/App.js — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2630>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBCNWFASAVOFSRG63ALSQUZPHANCNFSM4T3RCTEA> .

[urugator]

Try to console.log(this) inside the increment and you will see whats wrong
(the other one works, because it's using arrow function)