Why can't Mobx track dependencies in runInAction?

[janryWang]

Like this.

import { observable, autorun, runInAction } from "mobx";
const obs = observable({
  aa: 123
});

autorun(() => {
  runInAction(() => {
    if (obs.aa > 300) {
      obs.bb = 100;
    }
  });
});

obs.aa = 500;
console.log(obs.bb);

I did not find in the documentation that runInAction does not track dependencies，Is this a bug?

[kubk]

Why are you using autorun here? Your code would be much easier to follow without it:

const obs = observable({
  aa: 123
});

function setAA(value) {
  obs.aa = value;
  if (obs.aa > 300) {
     obs.bb = 100;
  }
}

[mweststrate]

That is by design, see: https://mobx.js.org/the-gist-of-mobx.html#principles. Your pattern isn't forbidden (but you have to put the condition outside the action), but it is a bit of an anti pattern as it can easily create hard to debug code-cycles. For example because bb would only be updated after the current action (when the reaction runs), and not immediately after updating aa, so you can observe an inconsistent state. We recommend to either express it as a computed if that makes sense, or otherwise use a dedicated function to update aa, and update bb as well with it.

…

On Thu, Feb 18, 2021 at 9:53 AM Janry ***@***.***> wrote: Like this. import { observable, autorun, runInAction } from "mobx";const obs = observable({ aa: 123}); autorun(() => { runInAction(() => { if (obs.aa > 300) { obs.bb = 100; } });}); obs.aa = 500;console.log(obs.bb); — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2815>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBDMFPOBXWBMS5SANQ3S7TPRTANCNFSM4XZ7KLXQ> .

[iChenLei]

Same as #2816

Maybe you want to find the implemention of mobx souce code.

mobx/packages/mobx/src/core/action.ts

Lines 108 to 110 in 851be05

	if (runAsAction) {
	untrackedStart()
	prevAllowStateChanges_ = allowStateChangesStart(true)