deepObserve callback getting called multiple times within a single runInAction function

I have a simple case that looks something like this:

const myArray = observable([]);
deepObserve(myArray, () => {
   console.log("array update");
});

runInAction(() => {
   myArray.length = 1;
   myArray.length = 2;
});

The log in this case runs twice, once for each length modification, immediately after each. Is this normal? I would expect that because those length updates are in a runInAction, the observer only gets updated once, after the action is fully executed.

[mweststrate]

I’m not sure what heavy looks like, but calling heavy n times versus n+1 times is the same problem from a cost perspective. Either the function is unbearably heavy and locking up the app, or it isn’t. But the +1 isn’t going to make the fundamental difference and I rather look into optimizing heavy itself then. For example you might memoize the filter result for existing entries, and only apply filtering to your newly incoming data instead of the whole set, etc. But so far it doesn’t sound your 1 run less is going to make the difference, and there is probably a bigger underlying problem; heavy being heavy.

Note that autorun does support a custom scheduler, in case you want to debounce it still, even after respecting transactions.

On Mon, Mar 15, 2021 at 9:58 AM Andrew @.***> wrote:

I read those pages and they seem clear to me. My concern is that my effect is a very heavy function that I only want to be invoked once the data actually changes, and not initially for initializing autorun or reaction. Here is a hopefully better example: https://jsfiddle.net/xfudacon/2/

You can see that the heavy function is triggered 2x. The second one is in response to changing the myFilters array so that’s fine, but it’s also running the first time, looping through all elements in myData. So to avoid the heavy function to be called twice, I still think these are the 2 options:

• use a reaction and create a lightweight data accessor function which is ok to be called initially. In this example it would be trivial to do this but in my actual code the heavy function is quite long and uses a complex filter object, so it’s not as straightforward although not impossible either
• use a throttled deepObserve although that feels like a hack

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/mobxjs/mobx-utils/issues/294#issuecomment-799285758, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAN4NBBBAGM7SVLPEVSALS3TDXK5PANCNFSM4ZDEFW3Q .

[dested]

Ran across this issue today. The reasoning makes sense but it still threw me for a bit of a loop. For any future googlers, I added a simple debounce to my deepObserve callback and that worked for my usecase.