Reaction when dependencies change, not when return value changes?

[JonDum]

From the Reactions docs I at first thought I had a pretty good understading of how it works based on the this paragraph:

reaction is like autorun, but gives more fine grained control on which observables will be tracked. It takes two functions: the first, data function, is tracked and returns the data that is used as input for the second, effect function. It is important to note that the side effect only reacts to data that was accessed in the data function, which might be less than the data that is actually used in the effect function.

Ok cool — reaction works just like autorun() except lets you be explicit with what what you want tracked. Awesome!

So my first usage attempt was something like this:

reaction(() => {
    this.dep1
    this.dep2
    this.dep3
  },
  () => this.doThing()
)

Which looks good to me. dep vars are accessed in the first parameter so when any one of them are changed the effect should be called.... but that does not work. doThing() is never called when dep1, dep2, dep3 are changed.

Queue me banging my head on the wall for a while trying all sorts of thing and googling why my reaction effect isn't firing. Before I start debugging mobx internals and realize this is not how reaction is programmed whatsoever.

mobx/packages/mobx/src/api/autorun.ts

Lines 166 to 182 in b46fc9c

	let changed: boolean = false
	const oldValue = value
	r.track(() => {
	const nextValue = allowStateChanges(false, () => expression(r))
	changed = firstTime || !equals(value, nextValue)
	value = nextValue
	})
	// This casting is nesessary as TS cannot infer proper type in current function implementation
	type OldValue = FireImmediately extends true ? T | undefined : T
	if (firstTime && opts.fireImmediately!) {
	effectAction(value, oldValue as OldValue, r)
	} else if (!firstTime && changed) {
	effectAction(value, oldValue as OldValue, r)
	}
	firstTime = false
	}

changed = firstTime || !equals(value, nextValue)\
...
else if (!firstTime && changed) {
            effectAction(value, oldValue as OldValue, r)
        }

Ah so there's the culprit. reaction()'s first parameter's return value is what is important.

So this lead me to re-read the docs and saw this paragraph that I missed the first time:

By default, the result of the data function has to change in order for the effect function to be triggered. Unlike autorun, the side effect won't run once when initialized, but only after the data expression returns a new value for the first time.

Oh. Ok. So I guess that makes sense.

But it also says "by default", so I'm assuming that there should be a way to make reaction() work like how I attempted it? I also see that it's calling r.track() and the dependencies are getting tracked... they just don't seem to be used at all to call the reaction effect?

Am I missing something here? How can I make a reaction() to multiple specific non-serializable observables?

[mweststrate]

Needs more elaborate answer, but inshort you can provide a custom equality function in the options that alwasmys returns false. Or still use autorun, but wrap the effect itself in an untracked block

…

On Sat, 4 May 2024, 09:34 Jonathan Dumaine, ***@***.***> wrote: From the Reactions <https://mobx.js.org/reactions.html> docs I at first had a pretty fundamental of how it works based on the next paragraph: reaction is like autorun, but gives more fine grained control on which observables will be tracked. It takes two functions: the first, data function, is *tracked* and returns the data that is used as input for the second, effect function. It is important to note that the side effect only reacts to data *that was accessed* in the data function, which might be less than the data that is actually used in the effect function. To me this is very clear — reaction works just like autorun() except lets you be explicit with what what you want tracked. Awesome! So my first usage attempt was something like this: reaction(() => { this.dep1 this.dep2 this.dep3 }, () => this.doThing() ) Which looks good to me. dep vars are accessed in the first parameter so when any one of them are changed the effect should be called.... but that does not work. doThing() is never called when dep1, dep2, dep3 are changed. Queue me banging my head on the wall for a while trying all sorts of thing and googling why my reaction effect isn't firing. Before I start debugging mobx internals and realize this is not how reaction is programmed whatsoever. https://github.com/mobxjs/mobx/blob/b46fc9cd224c35282efcc367ee2ef13169ca41cf/packages/mobx/src/api/autorun.ts#L166-L182 changed = firstTime || !equals(value, nextValue)\ ... else if (!firstTime && changed) { effectAction(value, oldValue as OldValue, r) } Ah so there's the culprit. reaction()'s first parameter's *return* value is what is important. So this lead me to re-read the docs and saw this paragraph that I missed the first time: By default, the result of the data function has to change in order for the effect function to be triggered. Unlike autorun, the side effect won't run once when initialized, but only after the data expression returns a new value for the first time. Oh. Ok. So I guess that makes sense. But it also says "by *default*", so I'm assuming that there should be a way to make reaction() work like how I attempted it? I also see that it's calling r.track() and the dependencies are getting tracked... they just don't seem to be used at all to call the reaction effect? Am I missing something here? How can I make a reaction() to multiple specific non-serializable observables? — Reply to this email directly, view it on GitHub <#3868>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBHBLNHSE64O4BFHSJDZASFSBAVCNFSM6AAAAABHGTVIYKVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZWGYYDIMJQHA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>