Using custom scheduler - your opinion

[kubk]

Since enforceAction is enabled by default in Mobx 6 we've started to use it in our codebase. Now our code looks similar to the examples from the documentation: https://mobx.js.org/actions.html#asynchronous-actions
But all of the examples have their own drawbacks:

• Wrap handlers in 'action' - Requires to write action for each async observable mutation
• Handle updates in separate actions - Requires to create a separate method
• async/await + runInAction - Requires to wrap observable mutations in runInAction
• flow + generator function - Poor generators support by TypeScript. For example let a = yield 1; // a is type of any instead of number

There is another undocumented way. Custom scheduler:

import { configure } from 'mobx';

export const configureBatching = () => {
  setTimeout(() => {
    configure({
      enforceActions: 'never',
      reactionScheduler: (f) => {
        setTimeout(f, 1);
      },
    });
  }, 1);
};

It configures MobX to auto batch all sync mutations without using action/runInAction. It will result in 2 rerenders instead of 4 in such code:

class Store {
  ...
  async someMethod() {
    this.foo = ...
    this.bar = ...
    await someAsyncOperation();
    this.foo = ...
    this.bar = ...
  }
}

So it is very similar to an action. What do you think about this approach? Are there any drawbacks or pitfalls? I've been using this approach for a few weeks and haven't found any issues. Thank you.

[urugator]

We have considered auto-commiting actions with setImmediate/Promise.resolve().then()/etc , but concluded it doesn't play well with mobx's completely synchronous nature.
Any kind of delay would make the whole thing harder to reason about and could introduce race conditions.