Skip to content

Svelte 5: $derived rune issue when destructuring #10319

@HighFunctioningSociopathSH

Description

Describe the bug

Reactivity is triggered for unchanged destructured properties of a derived object even though they weren't changed.

Reproduction

<svelte:options runes />

<script lang="ts">
  let mainObject = $state({
    number: 1,
    object: {},
    string: "hello"
  });

  let derivedObject = $derived(mainObject);

  setTimeout(() => {
    mainObject.number = 2;
  }, 3000);

  $inspect("derivedObject", derivedObject); // Works as expected and logs again after 3 seconds since a property inside
  // the mainObject was changed.

  $inspect("derivedObject.string", derivedObject.string); // Works as expected and DOES NOT log after 3 seconds since the 
  // property that was changed on the mainObject was `number` and not `string`

  let { number, object, string } = $derived(mainObject);

  $inspect("destructed string property", string); // I'm expecting this to be equivalent to the second $inspect 
  // which didn't log derivedObject.string but if destructured, and then logged, this last $inspect
  // will run again after 3 seconds even though just like the second $inspect `string` property wasn't changed at all.
</script>

The result will still be the same even if you switch the string property with object.

This is inconsistent behavior. The issue is from how $derived works when destructured since the $props rune's output is also an object and that is also used with a destructuring syntax but this issue doesn't happen with $props. The issue can be fixed if each property is separately $derived but this workaround is tedious and you also can't no longer use the ...rest syntax. perhaps the compiler can look at whether the $derived output is destructured or not and if they are destructured, then treat their dependency like it would with

let number = $derived(mainObject.number); 

This code in playground

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
    Memory: 7.04 GB / 15.63 GB
  Binaries:
    Node: 18.14.2 - C:\Program Files\nodejs\node.EXE
    npm: 9.7.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.144)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    svelte: ^5.0.0-next.40 => 5.0.0-next.40

Severity

blocking an upgrade

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions