Limits of MobX reaction deferral inside actions in version 6

Synchronous Reaction Limits in MobX 6

No, MobX 6 does not provide a built-in configuration or annotation to make specific reactions run synchronously while maintaining the global asynchronous micro-task scheduler. All reactions triggered by observable changes inside an action are queued and deferred until the action completes.

The Mechanism of Action Batching

In MobX 6, actions create a transaction boundary. When an observable is modified within this boundary, MobX marks the dependent reactions as stale but does not execute them immediately. This prevents "glitches" (temporary inconsistent states) and redundant renders. Because the scheduler is global, you cannot opt-out a single reaction from this batching behavior without affecting the entire application.

Workarounds for Immediate Execution

If a specific piece of logic must execute immediately upon a change, consider these two patterns:

• Move the mutation outside the action: Changes made outside of an action (provided enforceActions is not set to "always") trigger reactions immediately.
• Manual Triggering: Instead of relying on a reaction, call a specific function directly after the mutation inside the action.

// Example: Manual execution instead of reaction deferral
action updateData() {
  this.value = "new value";
  // Instead of waiting for a reaction, call the logic explicitly
  this.syncDependentLogic();
}

Trade-offs and Predictability

Permitting synchronous reactions—either by disabling the global scheduler or bypassing actions—introduces several risks:

• Infinite Loops: A synchronous reaction that modifies an observable it observes will trigger itself immediately, leading to a stack overflow.
• Performance Degradation: Frequent synchronous updates bypass the efficiency of batching, potentially causing UI lag or excessive re-computations.
• Inconsistent State: Running a reaction before an action finishes means the reaction may see a "partial" state where some observables are updated and others are not.

Verification

To verify the deferral behavior in your environment, you can use a simple log test:

import { observable, action, reaction } from "mobx";

const store = observable({ count: 0 });

reaction(
  () => store.count, 
  () => console.log("Reaction executed")
);

const increment = action(() => {
  console.log("Action start");
  store.count++;
  console.log("Action end");
});

increment();
// Expected Output:
// "Action start"
// "Action end"
// "Reaction executed" (deferred until after action)

Diagnostic Detail: Are you using a custom scheduler or a specific wrapper (like mobx-react-lite) that might be introducing additional batching layers?