Why mobx needs actions, why not just to batch all mutations into setImmediate? - mobx

Question

I am starting to learn mobx, and I do not understand why mobx invented "actions" entity. Will it be easier just to batch all changes into next tick inside setImmediate? That will automatically make all sync state changes act in the same way as #action do now. Is there any profit of triggering observers right just after action finished instead of inside next tick?

Answer 1

According to conversation from https://github.com/mobxjs/mobx/issues/1523 :
setImmediate implemented only in IE and Nodejs. setTimeout(fn, 0) can cause 4 ms delay
https://hackernoon.com/the-fundamental-principles-behind-mobx-7a725f71f3e8 : async update will not have such good stack trace to find who was triggering that update
React batches only setState calls from event listeners, and so do mobx-react couple. It means that React component will not re-render immediately after mutation, it will synchronously update only after event listener callback.
Few examples (all jsx component are supposed to be inside #observer):
// Ok to do this
<input value={appState.name} onChange={e => appState.name = e.target.value}/>
// Ok too, will rerender only once
<input value={appState.name} onChange={e => {
appState.name = e.target.value;
appState.foo = appState.foo + 1;
}}/>
// Not very good, will rerender twice on each click.
// Nevertheless, I do not know why someone will do this
<button onClick={() => {
setTimeout(() => {
appState.foo = appState.foo + 1;
appState.bar = appState.bar + 10;
}, 0);
}}>Click me foo={appState.foo} bar={appState.bar}</button>
// But that way it will rerender once and show console output only once too
autorun(() => console.info(`App state foo={appState.foo} bar={appState.bar}`));
<button onClick={() => {
setTimeout(() => {
runInAction(() => {
appState.bar = appState.bar + 10;
appState.foo = appState.foo + 1;
})
}, 0);
}}>Click me foo={appState.foo} bar={appState.bar}</button>
// That code will show console output twice, but rerender only once
autorun(() => console.info(`App state foo={appState.foo} bar={appState.bar}`));
<button onClick={() => {
setTimeout(() => {
ReactDOM.unstable_batchedUpdates(() => {
appState.bar = appState.bar + 10;
appState.foo = appState.foo + 1;
})
}, 0);
}}>Click me foo={appState.foo} bar={appState.bar}</button>