Per Svelte docs, effects rerun only when the object changes, not its properties. Is there a better way than snapshots to handle cases where manually listing multiple properties like `mapFilters.showRoads` is inconvenient? - ThreadSky

michalweglarz.com • 41 days ago

Per Svelte docs, effects rerun only when the object changes, not its properties.

Is there a better way than snapshots to handle cases where manually listing multiple properties like `mapFilters.showRoads` is inconvenient?

Comments

davesnider.com•41 days ago

I do something exactly like this to track the dirty state of a form so I can auto save it.

jonathonrp.github.io•41 days ago

im pretty sure effect runs when property changes, but you have to be accessing the property. but if you want any and all property changes to rerun effect there is JSON.stringify(). there is a new feature in PR for $state(s, { onchange() { //deep-state changes rerun this logic })

michalweglarz.com•41 days ago

Yeah, I was paraphrasing the statement from the docs but lost its meaning while trying to shorten it. 😅 I’d like to avoid accessing the properties.

JSON.stringify could work but doesn’t seem much different from the snapshot.

Hm, that feature wouldn’t help me if I had the state in a context.

jonathonrp.github.io•41 days ago

humm... I wonder if @paolo.ricciuti.me, would know some better options, than I. There is a linking you can do with $derived.by(...), where the state is derivable but also can be mutated, may not be what you want. but an idea

paolo.ricciuti.me•41 days ago

I commented already 😁

paolo.ricciuti.me•41 days ago

Two things:

1. Aren't you accessing the properties inside `filterItems`? If yes than that access counts as a dependency.
2. This sound like a derived more than an effect. If you can provide a repl I can help you rewrite that code to prevent the effect

michalweglarz.com•41 days ago

The code snippet I attached is just a vague excerpt from the larger thing, but when trying to reproduce it in the repl I realized you were absolutely right about 1. Accessing the properties inside the filter function is enough for it to be a dependency causing the effect’s re-run. TIL!

michalweglarz.com•41 days ago

I think I made a mistake and the issue is different. I used an effect as I was trying to sync the state with an external non-reactive system. I have `Map` object instantiated in `onMount`, and when I want to update its field, I first need to check if it’s undefined before using `setData` method.

michalweglarz.com•41 days ago

I think that check is causing issues (I've seen docs mention conditions in effect), as non-reactive Map is undefined on the first run. As a workaround the snapshot solution forcefully triggers the effect to check the map object again, which is defined the second time around.

michalweglarz.com•41 days ago

I tried my best reproducing this in the repl and this is the closest I got: https://svelte.dev/playground/dd6511b713754b13b6dc03aff2a474ef?version=5.19.3 It’s not perfect because in this example it’s enough to declare `geoMap` in `App.svelte` as state, but it cannot be done in the real scenario as it is way more complex. Sorry if it got too messy.

paolo.ricciuti.me•41 days ago

Oh no it's absolutely clear (and to be fair one of the few valid usage of $effect I've seen in the wild (although a callback to set the filters AND call the setData could suffice too 😁).

Why you can't declare geoMap as state? You don't have to convert the whole class to state: just wrap it with

Comments

Posting Rules

Reply