Keyed each blocks in Svelte - Step-by-Step Execution

Concept Flow - Keyed each blocks

Start with array of items

↓

Begin each block with key

↓

For each item in array

↓

Create DOM element linked to key

↓

If array changes

↓

Use keys to match old and new elements

↓

Update, add, or remove elements efficiently

↓

End

This flow shows how Svelte uses keys in each blocks to track items and update the DOM efficiently when the array changes.

Execution Sample

Svelte

<script>
  let fruits = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' }
  ];
</script>

{#each fruits as fruit (fruit.id)}
  <p>{fruit.name}</p>
{/each}

This code renders a list of fruits using a keyed each block to track items by their unique id.

Execution Table

Step	Action	Array State	DOM Elements	Notes
1	Initial render	[{id:1,name:'Apple'},{id:2,name:'Banana'}]	<p>Apple</p>, <p>Banana</p>	Create elements for each fruit keyed by id
2	Update array: add {id:3,name:'Cherry'}	[{id:1,name:'Apple'},{id:2,name:'Banana'},{id:3,name:'Cherry'}]	<p>Apple</p>, <p>Banana</p>, <p>Cherry</p>	Add new element for Cherry with key 3
3	Update array: remove {id:1}	[{id:2,name:'Banana'},{id:3,name:'Cherry'}]	<p>Banana</p>, <p>Cherry</p>	Remove element with key 1, keep others
4	Update array: reorder items	[{id:3,name:'Cherry'},{id:2,name:'Banana'}]	<p>Cherry</p>, <p>Banana</p>	Reorder elements using keys to avoid recreating
5	Update array: change name of id 2	[{id:3,name:'Cherry'},{id:2,name:'Blueberry'}]	<p>Cherry</p>, <p>Blueberry</p>	Update text of element with key 2
6	Exit	No further changes	DOM matches array items keyed	All updates done efficiently using keys

💡 No more updates; DOM elements correspond to array items by keys

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
fruits	[{id:1,name:'Apple'},{id:2,name:'Banana'}]	[{id:1,name:'Apple'},{id:2,name:'Banana'},{id:3,name:'Cherry'}]	[{id:2,name:'Banana'},{id:3,name:'Cherry'}]	[{id:3,name:'Cherry'},{id:2,name:'Banana'}]	[{id:3,name:'Cherry'},{id:2,name:'Blueberry'}]	[{id:3,name:'Cherry'},{id:2,name:'Blueberry'}]

Key Moments - 3 Insights

Why do we use a key in the each block?

The key helps Svelte track which DOM elements correspond to which data items, so it can update only what changed instead of rebuilding everything. See execution_table steps 2-5.

What happens if we don't use keys and reorder the array?

Without keys, Svelte may recreate all elements instead of reusing them, causing inefficient updates and losing element state. The keyed approach in step 4 avoids this.

How does Svelte know which element to update when an item changes?

Svelte matches items by their keys and updates only the changed parts, like the name change in step 5 where only the text updates.

Visual Quiz - 3 Questions

Look at the execution_table at step 3. What happens to the DOM elements?

A All elements are recreated

B The element with key 1 is removed

C A new element with key 1 is added

D No changes happen

💡 Hint

Check the 'DOM Elements' and 'Notes' columns at step 3 in execution_table

At which step does the array reorder its items?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the 'Array State' column in execution_table to find when order changes

If we removed the key from the each block, what would likely happen when reordering items?

A Svelte would update only changed items efficiently

B Nothing would change in the DOM

C Svelte would recreate all DOM elements causing inefficiency

D Svelte would throw an error

💡 Hint

Refer to key_moments explanation about the importance of keys for efficient updates

Concept Snapshot

Keyed each blocks in Svelte track list items by a unique key.
Syntax: {#each items as item (key)} ... {/each}
Keys help Svelte update only changed elements.
Without keys, reordering or changes cause full re-renders.
Use keys for efficient, stable DOM updates.

Full Transcript

This lesson shows how Svelte uses keyed each blocks to efficiently update lists. We start with an array of items, each with a unique id used as a key. When rendering, Svelte creates DOM elements linked to these keys. If the array changes by adding, removing, or reordering items, Svelte uses the keys to match old and new elements. This lets it update only what changed, avoiding full re-renders. The execution table traces steps like adding a new fruit, removing one, reordering, and changing a name. The variable tracker shows how the fruits array changes over time. Key moments clarify why keys are important and what happens without them. The quiz tests understanding of these updates and the role of keys. The snapshot summarizes the key points for quick reference.