Improve explanations of keyed each

[sacrosanctic]

Describe the Problem

Users often are confused by why their {#each} doesn't work. And when they do discover keyed each, they struggle to understand why keyed each fixes their problem.

Proposed Solutions

• Example 1
• Example 2

Notes

• It should be explicitly mentioned that an unkeyed each is the same as keying the index
• Add animation/visual to better represent what is happening in the DOM
• Describe the process as syncing data and DOM
• Remove the need for a Child component as that splits the relevant code and can act as a distraction
• Provide a side-by-side comparison
• Either unify the examples or provide multiple examples that are more cohesive and comparable

Reference

• https://svelte.dev/docs/svelte/each#Keyed-each-blocks
• https://svelte.dev/tutorial/svelte/keyed-each-blocks
• https://svelte.dev/playground/keyed-each-blocks

[sacrosanctic]

Another proposal is to change the default key from index to the object reference when it is an object. This would be a breaking change and would be delayed until the next major release.

[sacrosanctic]

Related sveltejs/svelte#15752