How to observe changes to an array with the $effect rune

[rgeditz]

I fail to understand why the $effect rune is not triggered in this REPL

I'd appreciate it if someone could explain to me why, and how can I observe changes to the array.

[brunnerh]

$effect does not react to any deeper changes, so if you only specify the array variable, it would only trigger if said variable is re-assigned.

If you just want to see changes for debugging, you can use $inspect(items), which triggers on deeper changes as well. If you need an actual effect, you have to be more specific, e.g. for adding/removing evaluate items.length, or deeply evaluate the object if you need all kinds of changes.

[rgeditz]

Thanks for the reply.

Let's say I wanted to save the UI state in localStorage and update it when the user adds a new item, how would I go about it?

Do I need to jump through the same hoops as with previous svelte versions, tracking things I don't care about or (as you mentioned) reassign the variable?

Should I run the side effect inside an event handler when the user clicks the button?

[brunnerh]

You should not need to do anything specific.

If you store the items in local storage, the items have to be iterated and read, which already should trigger all relevant signals, so the effect would re-run on any change.

JSON.stringify example

[rgeditz]

It's hard to wrap my head around this. I change the state (add an item to the array), then I want to observe changes to the state with $effect (an item is added to the array), but I can't.

It's quite possible that this is not a problem in practice since you'd probably want to access some values that are tracked to do something useful.

[brunnerh]

It should indeed not be a problem as long as you access everything relevant.

Each time an $effect is evaluated, the dependencies are updated as well.
So e.g. if an item is added, the item also becomes a new dependency.

[rgeditz]

All right, thanks again for the replies.

Still makes no sense to me that I can only observe changes to some parts of the state, but re-assigning works for my use case.