Keyed each blocks in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when using a keyed each block with dynamic list updates?

Consider the following Svelte component that uses a keyed each block to render a list of items. What will be the rendered output after clicking the button once?

Svelte

  <script>
    let items = [{ id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }];
    function update() {
      items = [{ id: 2, name: 'Banana' }, { id: 1, name: 'Apple' }];
    }
  </script>

  <button on:click={update}>Swap Items</button>

  <ul>
    {#each items as item (item.id)}
      <li>{item.name}</li>
    {/each}
  </ul>

A <ul><li>Banana</li><li>Banana</li></ul>

B <ul><li>Banana</li><li>Apple</li></ul>

C <ul><li>Apple</li><li>Apple</li></ul>

D <ul><li>Apple</li><li>Banana</li></ul>

💡 Hint

Remember that keyed each blocks track items by their key and reorder DOM elements instead of recreating them.

The keyed each block uses item.id as the key. When the list order changes, Svelte reorders the existing DOM nodes instead of recreating them. So the output reflects the swapped order: Banana first, then Apple.

❓ state_output

intermediate

What is the value of the variable after removing an item in a keyed each block?

Given the following Svelte code, what will be the value of items after clicking the 'Remove Banana' button?

Svelte

  <script>
    let items = [{ id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Cherry' }];
    function removeBanana() {
      items = items.filter(item => item.id !== 2);
    }
  </script>

  <button on:click={removeBanana}>Remove Banana</button>

  <ul>
    {#each items as item (item.id)}
      <li>{item.name}</li>
    {/each}
  </ul>

A [{ id: 1, name: 'Apple' }, { id: 3, name: 'Cherry' }]

B [{ id: 2, name: 'Banana' }, { id: 3, name: 'Cherry' }]

C [{ id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }]

D [{ id: 3, name: 'Cherry' }]

💡 Hint

Filtering removes the item with id === 2.

The removeBanana function filters out the item with id 2. So the resulting array contains only Apple and Cherry.

📝 Syntax

advanced

Which option correctly uses a keyed each block in Svelte?

Identify the correct syntax for a keyed each block that iterates over users array keyed by user.id.

A {#each users as user, user.id}<p>{user.name}</p>{/each}

B {#each users (user.id) as user}<p>{user.name}</p>{/each}

C {#each users as user key user.id}<p>{user.name}</p>{/each}

D {#each users as user (user.id)}<p>{user.name}</p>{/each}

💡 Hint

The key expression goes in parentheses immediately after the as clause.

The correct syntax is {#each users as user (user.id)}. Other options have invalid syntax and will cause errors.

🔧 Debug

advanced

Why does this keyed each block cause a runtime error?

Examine the code below. Why does it cause a runtime error when rendering?

Svelte

  <script>
    let items = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
  </script>

  <ul>
    {#each items as item (item.key)}
      <li>{item.name}</li>
    {/each}
  </ul>

A Because the key expression must be a string literal, not a property.

B Because the items array is empty, so nothing renders.

C Because 'item.key' is undefined; the key must be a valid property on each item.

D Because the each block is missing a closing {/each} tag.

💡 Hint

Check the property used as the key in the each block.

The code uses item.key as the key, but the objects have no key property. This causes a runtime error because keys must be defined and unique.

🧠 Conceptual

expert

How does Svelte's keyed each block optimize DOM updates compared to unkeyed each blocks?

Choose the best explanation of how Svelte uses keys in each blocks to optimize rendering.

A Svelte uses keys to track each item uniquely, so it can reorder or update existing DOM nodes instead of recreating them, improving performance.

B Keys in each blocks tell Svelte to always recreate all DOM nodes on every update to ensure freshness.

C Svelte ignores keys and always updates the DOM by replacing the entire list.

D Keys are only used for styling and have no effect on DOM updates.

💡 Hint

Think about how keys help identify items uniquely during list changes.

Keys allow Svelte to match items between renders, so it can reorder or update DOM nodes efficiently without full re-creation.