I need an explanation for Svelte component rendering.

[0x1618]

Hello, today I started looking into Svelte, and it seems very cool, but I'm not sure if I fully understand how Svelte works. My doubts began with Keyed each blocks, where Svelte doesn't delete the entire component but only a part of it. Why doesn't it delete the whole component DOM element, but only a part of it? Why are other elements affected, and why do their emojis change to something different? I don't understand this, so I would really appreciate an explanation of how Svelte's rendering works.

[brunnerh]

This is specific to #each, the problem is item identity.

There is no universal way of identifying items in an array, so by default Svelte assumes that items stay in place and are only added/removed at the end. If a component is used in #each, using other operations (like moving items or inserting/deleting elsewhere in the array) can cause issues, since then the assumption is wrong and the only thing Svelte "sees" is the data of an item changing.

So e.g. if the first item is removed, the existing component is updated with the data from the second item which takes the place of the first item.

If a component has any local state which is not reactively dependent on the component props, this will cause desynchronization (as with the const emoji in the tutorial).

A keyed #each prevents this by informing Svelte of an item's identity. Using this information, Svelte then can removed the first component and move the existing component for the second item to the its place rather than falsely updating properties of a component whose item no longer exists.

[0x1618]

Hey, I want to make sure I understand this correctly.

{#each things as thing}
	<Thing name={thing.name} />
{/each}

If a Thing component is deleted, this code reruns. For example, if the Thing component at index 0 is removed, does the component at index 1 "copy" the local state from index 0? Why is name={thing.name} dynamic in this case then?"

[brunnerh]

Reactivity does not happen in response to components getting deleted, components get added or deleted in response to data being added or deleted.
And any time the array changes the contents & properties of elements/components get updated.

Example for three things, the first one getting deleted:

• Array length changed => components are added or removed at the end.
  • There is one less item than components => the Thing component at index 2 is deleted.
• Array changed => contents & properties are updated (this is why name={thing.name} is dynamic)
  • name of Thing at index 0 is updated to thing[0].name (thing[0] was thing[1] before deletion)
  • name of Thing at index 1 is updated to thing[1].name (thing[1] was thing[2] before deletion)

REPL example that logs how elements in the DOM get updated/added/removed