Purpose of an Action

[omergilboa-zz]

Usually what I do is that I declare an observable object:

const state = mobx.observable({value: ''});

And then I register an action for mutating this state object:

mobx.action((val) => state.value = val);

Lately I notice that even if I don't use an action and just updating the state object directly:

state.value = 'some value';

The state value of this property will update and thus trigger a re-render.

I wander why is that? And if it's a valid updating implementation, why bother with mobx.action?

[urugator]

https://mobx.js.org/actions.html#updating-state-using-actions point 1.

const state = mobx.observable({ x: 0, y: 0 });

autorun(() => {
  console.log(state.x, state.y);
})

state.x = 1; // autorun immediately prints 0,1
state.y = 1; // autorun immediately prints 1,1

mobx.action(() => {
  state.x = 2; // autorun is only scheduled but not immediately invoked
  state.y = 2; // autorun is only scheduled but not immediately invoked
})() // scheduled autorun is invoked once and prints 2,2

Same goes for observer, but React does it's own batching, so you may not notice that.

[omergilboa-zz]

Hi @urugator :) Thanks for the reply..

Can you elaborate a bit more with the benefits of using mobx.action? Maybe with a more common "React" usage?

[mweststrate]

Did you check https://mobx.js.org/actions.html#updating-state-using-actions?

…

On Mon, Aug 15, 2022 at 8:18 AM Omer Gilboa ***@***.***> wrote: Hi @urugator <https://github.com/urugator> :) Thanks for the reply.. Can you elaborate a bit more with the benefits of using mobx.action? Maybe with a more common "React" usage? — Reply to this email directly, view it on GitHub <#3501 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBHNERAT6DC3GE3ZAODVZHVNDANCNFSM56RHUZEQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[omergilboa-zz]

Yes. So as I understand, basically performance wise it's better. Thanks 🙏🏻

[urugator]

It's not only about performance, you don't want observers to see your state only partially updated (inconsistent).