Reaction cycling 100 times loop

[TechAkayy]

Good day all! Trying my best to make mobx work for me!

New to mobx, after spending some quality time on the docs, I have hit the reaction cycling 100 times issue. I have looked into the logic over an again, but couldn't see anything wrong. This is the flow:

1. immutable-1 sets an object (has amount)
2. autorun catches it and amount is presented to user
3. percentage value is entered by user
4. tax is calculated
5. immutable-2 is updated

Here is a simple reproduction (from a larger store that has both mutable & immutable props).

Reproduction link (check console): https://codesandbox.io/s/babel-7-decorators-boilerplate-forked-c288n?file=/src/index.js

import { observable, action, makeObservable, autorun } from "mobx";
import remotedev from "mobx-remotedev";

class Store {
  constructor() {
    makeObservable(this, {
      immutable1: observable.ref,
      immutable2: observable.ref,
      update_immutable1: action,
      update_immutable2: action
    });
  }

  immutable1 = { amount: 0 };
  immutable2 = {};

  update_immutable1(data) {
    this.immutable1 = { ...data };
  }

  update_immutable2(data) {
    this.immutable2 = { ...data };
    console.log(this.immutable2);
  }
}

const store = new Store();

export default remotedev(store, {
  remote: true,
  port: 8000
});

const calcTax = (obj, percentage) => (obj.amount * percentage) / 100;

autorun(() => {
  // show amount to user, and fetch percentage from them
  const percentage = 10;
  store.update_immutable2({
    tax: calcTax(store.immutable1, percentage)
  });
});

store.update_immutable1({ amount: 100 });

[mweststrate]

I disabled remotedev in your example, and the problem seems to be gone, so I suspect that remotedev doesn't do an untracked read of the state.

[TechAkayy]

Oh wow, I would have never thought of that.. Are there any alternative devtools options for vanilla javascript app using mobx?

[TechAkayy]

While I waited for a reply, I did manage to fix it brute force, by using reaction instead of autorun. Brain-fried!

https://codesandbox.io/s/babel-7-decorators-boilerplate-forked-jg0lv?file=/src/index.js

reaction(
  () => store.immutable1,
  () => {
    // show amount to user, and fetch percentage from them
    const percentage = 10;
    store.update_immutable2({
      tax: calcTax(store.immutable1, percentage)
    });
  }
);

Would be great to get some solid devtools support please..

[TechAkayy]

@mweststrate, just another weird one, I understand remotedev was the trouble above, but see here...

https://codesandbox.io/s/babel-7-decorators-boilerplate-forked-o7xur?file=/src/index.js

• I have actually removed reference to store.immutable1 in my original autorun version (code snippet below).
• Essentially, this autorun doesn't really read & track any observables at all & the action under it (store.update_immutable2) should be untracked.
• So, after initialisation one-time run, this autorun should never get re-triggerred irrespective of whether store.immutable1 value was updated or not (even if store.immutable1 was read & tracked by remotedev)
• Still, I'm getting the 100 cycle issue, I wonder if the issue is with autorun (action getting tracked while it shoudn't be / observable.ref related) at mobx's end?

autorun(() => {
  console.log("autorun is triggered");
  store.update_immutable2({});
});

[TechAkayy]

Not sure if this is related, but here is someone who had issues with object transformation in general (of course, vague one without code) & ended up resorting to "reaction" instead of "autorun"... https://stackoverflow.com/questions/45362610/mobx-autorun-running-too-often-need-it-to-skip-in-some-cases-run-only-after