Svelte 5: ERR_SVELTE_TOO_MANY_UPDATES when updating state

[amit13k]

Describe the bug

This code leads to ERR_SVELTE_TOO_MANY_UPDATES,

<script>
let x = $state({
	count: 0
});

$effect(() => {
	x.count = 1;
});
</script>

while this doesn't cause any error,

<script>
let x = $state({
	count: 0
});

$effect(() => {
	x = { count: 1 }
});
</script>

Looks like a reactivity bug.

Reproduction

Svelte 5 REPL with Error

Svelte 5 REPL without Error

Logs

No response

System Info

System:
    OS: macOS 14.2
    CPU: (12) arm64 Apple M2 Pro
    Memory: 269.64 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.2.0 - /opt/homebrew/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - /opt/homebrew/bin/npm
    pnpm: 8.11.0 - ~/Library/pnpm/pnpm
    bun: 1.0.3 - ~/.bun/bin/bun
  Browsers:
    Chrome: 119.0.6045.199
    Chrome Canary: 121.0.6156.2
    Safari: 17.2

Severity

blocking an upgrade

[chainlist]

As far as I understood $effect, to me, it is not a good practice to reassign values while in an $effect.

Unless you are using untrack to avoid the infiinite update loop.

<script>
   import { untrack } from 'svelte';

   let x= $state({ count: 0 });

  $effect(() => {
    untrack(() => {
       x.count += 1;
   });
  });
</script>

[7nik]

x.count = 1; is the same as a.b.c.d = 1 - to assign to d, you need to read a, its b and b's c.

Also, use guards:

$effect(() => {
  if (x.count !== 1) {
    x.count = 1;
  }
});

In other cases, turn the used variables into primitives or separate the effect's dependencies and mutated variables

[brunnerh]

Related/duplicate of:

• [Svelte 5] Runes ($effect, $derived) don't work as expected when values are nested inside an object. #9639

[Rich-Harris]

This would be fixed by #9685, but we're holding off merging that because we have a more comprehensive update in the works that will change the behaviour around this stuff. We'll open a PR soon

[amit13k]

Fixed in svelte@5.0.0-next.18