derived does not update dom

[alex-pirogov]

Describe the bug

I've made this simple repl where result is constructed from initial and dynamic variables using $derived rune. By clicking the first button dynamic changes and thus result is also expected to be changed, which it seems to be according to console logs. But dom is not changed until the second button is clicked, explicitly toggling {#key ...} around target dom.

I am not shure if this is expected behavior or not. If it is i wonder if there is a way to update dom without {#key ...} directive.

Reproduction

https://svelte.dev/playground/08c395888df14b178b71f0d60dc77898?version=5.19.8

Logs

System Info

Svelte v5.19.8 REPL

Severity

annoyance

[paoloricciuti]

I am looking at this from the phone so I might be wrong but you are not using any stateful variable in derived so it will never update

[sacrosanctic]

can confirm what @paoloricciuti said

The fix is making initial a state

let initial = $state([
	{ id: 1, state: 'initial' },
	{ id: 2, state: 'initial' }
])

and this to prevent state mutations

let result = $derived.by(() => {
	let elements = [...initial]
	...
}

// or use .map
let result = $derived.by(() => {
	let elements = initial.map(...)
}

[alex-pirogov]

Sorry i've made a mistake when creating reproduction. I meant to reference dynamic inside $derived so that result is kind of "blend" of initial & dynamic. But this adjustment does not change the behavior (dom does not change still).

	const initial = [
		{ id: 1, state: 'initial' },
		{ id: 2, state: 'initial' }
	]
	let dynamic = $state([])

	let result = $derived.by(() => {
		let elements = initial

-		for (let element of elements) {
-			const index = elements.findIndex((e) => e.id === element.id)
-			elements[index] = element
+		for (let de of dynamic) {
+			const index = elements.findIndex((e) => e.id === de.id)
+			elements[index] = de
		}

		return elements
	})

(also updated repl)

@sacrosanctic making initial a state helps indeed, but i dont quite understand why. I thought referencing dynamic should be enough.

[paoloricciuti]

Sorry i've made a mistake when creating reproduction. I meant to reference dynamic inside $derived so that result is kind of "blend" of initial & dynamic. But this adjustment does not change the behavior (dom does not change still).

const initial = [
{ id: 1, state: 'initial' },
{ id: 2, state: 'initial' }
]
let dynamic = $state([])

let result = $derived.by(() => {
let elements = initial

• for (let element of elements) {
  

• 	const index = elements.findIndex((e) => e.id === element.id)
  

• 	elements[index] = element
  

• for (let de of dynamic) {
  

• 	const index = elements.findIndex((e) => e.id === de.id)
  

• 	elements[index] = de
  }
  
  return elements
  

  })
  (also updated repl)

@sacrosanctic making initial a state helps indeed, but i dont quite understand why. I thought referencing dynamic should be enough.

In this case the problem is that your derived is returning literally the same reference to initial which never changes...so as far as svelte is concerned the value of that derived is the same. You can also fix this by spreading into a new array inside the derived.

[alex-pirogov]

I see now, @paoloricciuti thank you for explaining this