Advantage of flow over async/await?

[schontz]

I understand that flows don't batch, but what purpose do they serve exactly? What is the difference between the following:

class FlowStore {
  constructor() { makeAutoObservable(this); }

  count = 0

  *increment() {
    this.count++;
    yield this.incrementLater();
  }

  async incrementLater() {
    await delay(100);
    this.count++;
  }
}

class NoFlowStore {
  constructor() { makeAutoObservable(this); }

  count = 0

  async increment() {
    this.count++;
    await this.incrementLater();
  }

  async incrementLater() {
    await delay(100);
    this.count++;
  }
}

To me, they look like they both accomplish the same goal, but there must be some difference under the hood? What are the benefits of putting things through a flow?

[urugator]

Accepted answer:

#3171 (reply in thread)

Original answer:

*increment() {
    this.count++;
    yield this.incrementLater();
}

is equivalent to:

async increment() {
   runInAction(() => {
      this.count++;
   })   
   await this.incrementLater();
}

Besides mobx complaining about mutating observable outside action the practical implications are only noticable if you mutate multiple observables at a time:

async increment() {
    this.count++;
    this.foo++;
    this.bar++;
    await this.incrementLater();
}

This would result in 4 individual invocations of observers (instead of 2 if using flow).

[schontz]

But how is that different than this?

flow(function *foo() {
  this.a = 100;
  yield delay(2000);
  this.a = 200;
}

This still causes observers of a to be updated twice. The async/await version is about the same. Assuming all functions are action, is there a real difference? I feel like I'm missing the "aha" moment here...

[urugator]

It's about batching synchronous mutations - multiple mutations in-beetwen individual awaits. If there is only one mutation at a time in between the awaits, there is nothing to batch. Imagine there is a component observing this.a

action(async () => {
   this.a = 0;
   this.a = 1;
   // leaving action -> re-render
   await delay(2000);
   // no action/batch here
   this.a = 2; // re-render
   this.a = 3; // re-render  
   await delay(2000);
   // no action/batch here
   this.a = 4; // re-render
   this.a = 5; // re-render
})

action(async () => {
   this.a = 0;
   this.a = 1;
   // leaving action -> re-render
   await delay(2000);
   runInAction(() => {
      this.a = 2;
      this.a = 3;
      // leaving action -> re-render
   })   
   await delay(2000);
   runInAction(() => {
      this.a = 4;
      this.a = 5;
      // leaving action -> re-render
   })   
})

flow(function* () {
   this.a = 0;
   this.a = 1;
   // leaving action -> re-render
   yield delay(2000);
   this.a = 2;
   this.a = 3;
   // leaving action -> re-render  
   yield delay(2000);
   this.a = 4;
   this.a = 5;
   // leaving action -> re-render  
})

[schontz]

Gotcha. To summarize:

In async actions, no code after the first async call will be batched.

[schontz]

Can you post that last comment stand-alone so I can mark it as the answer? It explains things the clearest. 👍

[urugator]

no code after the first async call

Well code, that isn't explicitely part of other action... like this is ok:

action(async () => {
   this.a = 0;
   this.a = 1;
  // re-render
   await delay(2000);
   this.otherAction();
})

but the following isn't:

action(async () => {
   this.a = 0;
   this.a = 1;
   await delay(2000);
   this.otherAction1(); // re-render
   this.otherAction2(); // re-render
})

You would still need to batch these multiple actions together.