Should observable changes inside first reaction effect the second one?

[ArmandsB]

Hi!

I have interesting issue and would like to know if this kind of behaviour is expected? If Yes, then what could be the best solution to avoid this?

I have defined 2 reactions, which listens the same prop. In my expectations, I was expecting that each time a prop changes, reaction is called. But in this example, I noticed that If I change observable prop value inside first reaction, second reaction is skipping the original value (I would expect that second reaction is called with ALL values (in this example 2 times instead 1).

Here is the link to JSFiddle

Example code:

const { makeAutoObservable, action, reaction } = mobx;

class Animal {
    energyLevel = 100;

		constructor() {
       makeAutoObservable(this);
    }
	
    setEnergy = (newValue) => {
       this.energyLevel = newValue;
    }
}

const animal = new Animal();

reaction(() => animal.energyLevel, (energyLevel) => {
    console.log("First reaction", energyLevel);
    if (energyLevel > 50) {
      animal.setEnergy(50);
    }
});


reaction(() => animal.energyLevel, (energyLevel) => {
    console.log("second reaction", energyLevel);
}); 

animal.setEnergy(90);

// Print "First reaction 90"
// Print "second reaction 50" (I would expect here to second reaction would call with 90 too)
// Print "First reaction 50"

[urugator]

Did you checked https://mobx.js.org/reactions.html#use-reactions-sparingly ?

[ArmandsB]

Yes and I see there Reactions shouldn't update other observables. But there is also mentioned that "its a principal, not a law".

I have situation where I have two observables - A and B. Both can be updated using a action. A has multiple states which it can be.
I want to make a logic, where when A has value X, then I clear B value. And in my opinion, reaction is a good fit. Is there any better solution/concept here? As there could be a lot places where A is updated, it would be a nightmare to clear B value on each of that places.

reaction(() => A, (aValue) => {
    if (aValue === X) {
      setBValue(undefined);
   }
}); 

Should not reaction work like pipeline? like if there is a new action inside reaction, it will go at the end of pipeline.

[mweststrate]

It's a principal not a law because you can use it at your own risk and MobX doesn't give any guarantees on specific semantics in such case. If something isn't forbidden it doesn't imply it is a good idea. Mobx doesn't guarantee in which other reactions execute, or that you wouldn't get in an endless loop. So the safe thing to do here is to merge the effects. But otherwise make sure you read animal.energyLevel, not the energyLevel argument, as scheduling the reaction and running it are two separate moments in time, and the energyLevel argument is captured earlier. But again, use at your own risk.

In this specific case, the modelling is really strange, a precondition to clamp a value like this should be part of the update logic, not part of the effect, where others can already have seen the value. The way you clamp the value has now zero transactional safety, just use a setter / update function instead where you check the value before you store and propagate it.

[ArmandsB]

Okey - thanks!

[urugator]

it would be a nightmare to clear B value on each of that places.

Quite contrary. A nightmare would be, if any assigment could any time invoke a directly related code in completely different place and the only way of knowing would be to scan all the rest of your codebase to locate these reactions. Even if you would keep all reactions collocated at single place, to understand what's really happening when going through your code, you would constantly have to keep this whole reaction network in your head.
The reaction lives on the boundary of your application, it says: "When all state mutations are finished, therefore the application is in consistent state, notify the outside world that it's safe to consume me and act on itself" All consumers (reactions) scheduled during single action (nested actions are still considered part of single cation), should be invoked just once.

want to make a logic, where when A has value X, then I clear B value.

a = 0
b = 0
setA(a) {	
  this.a = a	
  if (a === X) {
    this.b = 0;
  }
}
setB(b) {
  this.b = b;
}