mutating derived state also mutates the original state svelte 5

[Keshav-writes-code]

Describe the bug

Code

<script>
	let initial = $state([]);
	let mutable = $derived(initial);
	mutable.push({name: "something"})
	$inspect(initial)
</script>

Console

init 
(1) [ {…} ]
0: { name: "something" }
length: 1

but it shouldn't mutate the original initial state

Reproduction

Reproduction URL
Opoen this Svelte Playground link and open up the Playground's Console adn see the Intial State having the pushed item

Logs

System Info

System:
    OS: Linux 5.10 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (12) x64 Intel(R) Core(TM) i5-10400F CPU @ 2.90GHz
    Memory: 6.32 GB / 11.60 GB
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 22.15.0 - ~/.config/nvm/versions/node/v22.15.0/bin/node
    npm: 10.9.2 - ~/.config/nvm/versions/node/v22.15.0/bin/npm
    bun: 1.2.10 - ~/.bun/bin/bun

Severity

annoyance

[7nik]

It is so by design - you just return the original object.
You should think about that code like this:

let initial = []; // $state marks this variable and value as reactive
let mutable = initial; // $derived just re-assigns the value when dependecies change
mutable.push({name: "something"});
console.log(initial); // $inspect is kind of reactive console.log

If you want a copy - make a copy:

let shallowCopy = $derived([...original]);
let deepCopy = $derived($state.snapshot(original));