MobX 6: Preventing Duplicate Writes on Retrying Async Actions with makeAutoObservable

Guarding Async Actions Against Duplicate Writes

To prevent duplicate writes during retries in MobX 6 when using makeAutoObservable, you must ensure the async action is defined as a standard class method rather than an arrow function or a dynamically created function. MobX 6 automatically binds class methods; maintaining a stable function reference ensures that retries are treated as calls to the same action rather than the creation of new, distinct action contexts.

Recommended Implementation Pattern

The most effective way to mitigate duplicate writes without manual action wrapping is to track the pending state of the promise. Since makeAutoObservable cannot make an action inherently idempotent, you must implement a guard clause using an observable property.

1. Define a loading state: Add a boolean observable (e.g., isFetching) to track the lifecycle of the request.
2. Implement a Guard Clause: Check this state at the start of the async method to prevent concurrent executions of the same logic.
3. Use Standard Methods: Avoid arrow functions for these methods to ensure makeAutoObservable handles the binding correctly.

class DataStore {
  data = null;
  isFetching = false;

  constructor() {
    makeAutoObservable(this);
  }

  async fetchData() {
    if (this.isFetching) return; // Guard against duplicate concurrent writes
    
    this.isFetching = true;
    try {
      const result = await api.getData();
      this.data = result;
    } finally {
      this.isFetching = false;
    }
  }
}

Technical Explanation

Duplicate writes often occur when async logic is wrapped in a new function reference during a retry loop. In MobX 6, if a method is defined as an arrow function class field, it is not bound by makeAutoObservable in the same way a prototype method is. If your retry logic involves re-creating the function or passing an anonymous wrapper, MobX may trigger separate reactions for each instance.

By using a standard class method and a state-based guard, you ensure that only one logical flow can modify the observable state at a time, regardless of how many times the retry mechanism attempts to invoke the method.

Verification Steps

• Reference Check: Log the action method reference before and after a retry to confirm the function identity remains the same.
• State Tracking: Use MobX DevTools to verify that only one action entry is recorded per logical request attempt.
• Concurrency Test: Trigger the action multiple times in rapid succession; the guard clause should prevent the try block from executing more than once until the first promise resolves.