How to ensure the callback only executes when the watched value(s) change(s)?

[benface]

First of all, thank you so much for this library. 🤩 👏

But is it by design that the callback is called not just when one of the specified properties change, but also when the observer is initially attached to an element? If so, is there any way around that?

My use case is a React component that changes the state of one of its ancestors via context when a custom property changes inside it, but because the callback is called initially as well, it causes an infinite render loop.

Simple reproduction in CodeSandbox (basically the same example you have in the README but in a React/TS project because I had errors when trying in a vanilla JS project for some reason; see how values is logged on load)

[bramus]

There is currently no option for this, but you can filter these out yourself if you set the returnFormat to ReturnFormat.OBJECT (which is the default) and then in your callback check whether the previousValue is undefined or not. If it is, then it means it’s the first trigger, which you can ignore.

[benface]

That makes a lot of sense @bramus! Note that previousValue is currently typed as string. I will test now to see if it indeed is undefined on the first trigger.

[benface]

I will test now to see if it indeed is undefined on the first trigger.

It did, and actually TS didn't even warn about it, probably because libraries can be authored in non-strict mode where undefined is ignored? Anyway, thank you so much, this fully addresses my issue, so I will close it. :)

[bramus]

I’ve updated the type definition and also updated the README to include this info.

Could be that I end up adding an option to control this, for user convenience, so I’m leaving this one open.