UI Reactivity Issue with Store Changes in Svelte 5

[mlage-jw]

Describe the bug

In Svelte 5, store updates no longer trigger UI reactivity in the same way they did in Svelte 4. While the store itself does update, the UI does not reflect these changes properly unless the $state version is used.

Expected Behavior

The UI should automatically update in response to store changes, as it did in Svelte 4.

Actual Behavior:

In Svelte 5, store updates do not trigger UI reactivity as expected, leading to inconsistent behavior.

Additional Information

If this change in behavior is intentional, clarification on how to properly ensure UI reactivity with stores in Svelte 5 would be helpful.

Reproduction

Steps to Reproduce

1. Open the following REPL for Svelte 4: Svelte 4 REPL

   • Click the INC button.
   • The UI updates correctly when the store changes.

2. Open the following REPL for Svelte 5: Svelte 5 REPL

   • Click the INC button.
   • The store updates internally, but the UI does not reflect the change. The $state version works fine.

Logs

System Info

REPL

Severity

blocking an upgrade

[Ocean-OS]

This seems to work

[paoloricciuti]

I think the problem here is each...if you directly print the store it updates properly but since the reference is the same the each is probably skipping the render

[mithi]

I think the problem here is each...if you directly print the store it updates properly but since the reference is the same the each is probably skipping the render

I can confirm, when running $inspect(items) inside <List />, we see that <List /> is aware of the change.

the code below updates the UI

items.update(items => {
  const i = items.findIndex(item => item.id === id)
  if (i > -1) {
    items[i].value += 1
    items[i] = { ...items[i] } // commenting this out will not update the UI
  }
  return items
})

The code below also updates the UI (but of course, nobody should do this)

{#each items as item (`${item.id}-${item.value}`)}
  <li>{item.value} <button onclick={() => onincrease(item.id)}>INC</button></li>
{/each}

It would be nice if to know if this is the intended behavior and is a breaking change from svelte 4 -> svelte 5 for smoother migration

[brunnerh]

I think the #each should fully invalidate on change if the items source is a store/part of a store.

This seems to behave as expected if all logic is in the same component: Example

[paoloricciuti]

It would be nice if to know if this is the intended behavior and is a breaking change from svelte 4 -> svelte 5 for smoother migration

No i think this is a bug...will try to fix later.