`$effect` not re-run after mutating nested state

[jacekalms]

Describe the bug

Reproduction

Consider the following code. It prints 1 to the console, followed by 10 – as expected.

let state = $state({ value: 1 });

$effect(() => {
  console.log(state.value);

  if (state.value == 1) {
    state = { value: 10 };
  }
});

Now wire up these actions to buttons A and B. Click either of them.

// Button A
function set100() {
  state.value = 100;
}

// Button B
function replaceWith1000() {
  state = { value: 1000 };
}

Expected behavior

Clicking either button A or B should re-run the effect, hence printing either 100 or 1000 to the console.

Actual behavior

Clicking button A doesn’t re-run the effect. Only clicking button B does.

Further info

• The bug is “fixed” by first clicking Button B (prints 1000), and then clicking Button A (now correctly prints 100).
• We found a few other such “fixes”, which are included in the sample code linked below.
• This bug was introduced in 5.24.0, most likely due to this change: feat: allow state created in deriveds/effects to be written/read locally without self-invalidation #15553

Reproduction

Still works in 5.23.2:
https://svelte.dev/playground/9feb1af4faa04465ac1cc7da439fe69e?version=5.23.2

Broken in 5.24.0 and onwards:
https://svelte.dev/playground/9feb1af4faa04465ac1cc7da439fe69e?version=5.24.0

Logs

System Info

System:
    OS: macOS 15.3.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 4.16 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.9.0 - /opt/homebrew/bin/node
    npm: 11.2.0 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 134.1.76.74
    Chrome: 135.0.7049.115
    Safari: 18.3.1
  npmPackages:
    svelte: ^5.0.0 => 5.28.2

Severity

annoyance

[UzairMalik17]

Hi @jacekalms,

I’m fairly new to this, so I may be off the mark here, and I completely understand if what I’m saying seems a bit obvious or incorrect. But I was wondering why we are not using state = { value: 100 }; in function A, instead of state.value = 100; like we are doing in function B and effect as well.

I’ve tried this in the playground you provided (link: Svelte Playground) and it seems to work as expected.

I would really appreciate any clarification or feedback!

Thanks in advance!

[jacekalms]

Hi @UzairMalik17,

Thanks for your comment.

Yes, if we would use state = { value: 100 }; then it would work. But state.value = 100; should also work; that's the bug. This code is just to illustrate the problem.