reaction Inside runInAction

[Luncher]

Intended outcome:

reaction will be triggered

import { autorun, runInAction, observable, reaction } from "mobx";

runInAction(() => {
  const s = observable({ foo: 1 }, undefined, { deep: false });

  reaction(
    () => s.foo,
    (val) => {
      console.log("reaction: ", val);
    }
  );

  autorun(() => {
    console.log("autorun: ", s.foo);
  });

  runInAction(() => {
    s.foo = 2;
  });
});

Actual outcome:

When the reaction is placed in the runInAction function, the side effect function will not be triggered

How to reproduce the issue:

See console output: codesandbox

Versions

mobx-6.1.7

[iChenLei]

runInAction won't track anything

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

Lines 108 to 110 in 851be05

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

[mweststrate]

@iChenLei

runInAction won't track anything

That is in principle correct, however autorun and reaction themselve should open a tracking context on top of what is currently running

@Luncher

The behavior you see is correct. Reactions in general run only after the outermost transaction finishes. So after the entire block. That means the first value they both see for s.foo is 2. autorun always runs its effect + tracking function immediately. reaction only runs the tracking function immediately, but the effect function only on the first change. If you either change s.foo another time outside / after the outer action, or if you set the fireImmediately flag on the reaction, you will see it will react to the changes.

[iChenLei]

@mweststrate Thanks for amend. Sir, I can learn new knowledge every time from u, so happy.

[Luncher]

@mweststrate @iChenLei
Thanks for feedback~