Svelte referential identity

Okay I am switching from React to Svelte , because I love to feel DOM in my own hands , just like a mechanic fella who enjoys feeling engines into one's hands . I decided to follow Svelte wizard-like tutorial series on the man page , I've enjoyed till I've crossed what I've not figured out long time since started learning React tho . I guess I could justify there was no decent explanation why . Some people may agree with this , other may think I deserted React base . Without further ado , let's jump into code !

Consider the following code example as presented within this link :

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

That's what happens visually when no referential ID (thing.id) for code block provided :

Explanation : the "stack's" index as presented in illustration above slides towards 0th index out of frame – This is not what we presumably expected tho , so let's fix this with the following tweak by adding a referential ID of (thing.id) as so :

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

Visual representation after tweak applied :

Now we removed first item as expected i.e. removing first item we removing first DOM node .

That's all folks in my very first of Svelte-series . If any typos found or suggestions could be made , please leave a comment below !