Why should I use the action decorator in mobx

Question

I'm trying to get my head around the usefulness of the action decorator in mobx, even after reading the doc, https://mobx.js.org/refguide/action.html

Still wondering why I should use @action or @action.bound, other than to enforce a pattern where a component cannot change the observable directly.

The above article mentions providing "useful debugging information". But where can I find this info? F12->Console doesn't show anything when calling an @action or @action.bound method.

Or am I doing something wrong in the below code?

Should I install some mobx debugger? Thanks.

class CommentStore {
    @observable commentData = [];

    @action.bound
    updateComment(id, name) {     
        this.commentData.map(p => p.id === id ? p.name = name : p.name = p.name);      
    }
      ...

Ehsan Ehsan · Accepted Answer · 2018-11-17T13:50:49

If you mutate more than an observable variables inside a method which is not decorated by @action, your derivations (autorun) will run multiple time. This issue is not present when you work with react. render function will run only once.

one of the things which @action decorator do is to prevent multiple invocation of your derivations.

Why should I use the action decorator in mobx

1 Answers