Listen to deep $state changes like $inspect but in prod mode?

[errmayank]

Describe the problem

Is there a proper way to listen to any deeply nested change in the $state object? Here's a minimal reproduction link

When you make changes to Name input it fires the console.log() but on changes to Method and URL nothing happens

If you comment out the $effect logic and uncomment $inspect one this works for all input changes and it would be ideal for me but it becomes a no-op in production build as stated in the docs

Can i do this without needing to explicitly add each key to the listenTo array in the repro?

Describe the proposed solution

$inspect but for production?

Importance

would make my life easier

[elliott-with-the-longest-name-on-github]

If you want a quick-and-dirty solution, just JSON.stringify(value_to_track). It's definitely not efficient for massive values but if we're talking small ones, it'll trigger changes on every property change since it recursively reads everything. Also doesn't work for recursive stuff.

[paoloricciuti]

Also there's this proposal #15069 that will allow you to specify a callback on the state itself (but you have to own the state)

[errmayank]

@elliott-with-the-longest-name-on-github nah, i'd rather add each key separately to the listenTo array than unnecessary serializing the state like that but thanks

[errmayank]

@paoloricciuti this looks great! by owning the state do you mean like the global exported state in the repro above and it can't be a passed prop or something?

[paoloricciuti]

@paoloricciuti this looks great! by owning the state do you mean like the global exported state in the repro above and it can't be a passed prop or something?

I mean that you can't do this with a prop for example...it has to be declared state

[brunnerh]

$inspect is pretty much just an $effect.pre that uses $state.snapshot on the values.
You can do the same in your code (though the variable should be renamed from state to something else, otherwise you get errors).

Playground

[errmayank]

Great! thanks @brunnerh. Just one more thing, would this $state.snapshot cause any performance hit compared to @paoloricciuti's onchange listener which applies on the $state itself?

[paoloricciuti]

Great! thanks @brunnerh. Just one more thing, would this $state.snapshot cause any performance hit compared to @paoloricciuti's onchange listener which applies on the $state itself?

Yes, $state.snapshot will traverse the whole object and $effect has a bit of overhead too... nothing really to be preoccupied but if that PR lands it will probably be better to use that if possible

[Thiagolino8]

Also $state.snapshot uses structuredClone under the hood, which is MUCH less performant than JSON.stringify when you just want to read the values

[paoloricciuti]

I'm gonna close this since it's already doable in some way or another...thanks for reporting