Keyed each blocks in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a keyed each block in Svelte?

A keyed each block in Svelte is a way to loop over a list where each item is tracked by a unique key. This helps Svelte update only the changed items in the list, improving performance and keeping the UI in sync.

beginner

Why should you use a key in an each block?

Using a key helps Svelte identify which items changed, moved, or were removed. This prevents unnecessary re-rendering and keeps animations and transitions smooth.

beginner

How do you write a keyed each block in Svelte?

You write it like this: <br> {#each items as item (item.id)} <br> The part in parentheses is the key, usually a unique id from the item.

intermediate

What happens if you don’t use keys in an each block?

Svelte will update the list by position, which can cause wrong items to update or lose their state. This can lead to bugs or weird UI behavior.

intermediate

Can you use any value as a key in a keyed each block?

The key should be a unique and stable value for each item, like an id. Using indexes or non-unique values can cause problems when the list changes.

What is the main benefit of using a keyed each block in Svelte?

A It disables animations.

B It makes the list items bigger.

C It helps Svelte track items uniquely for efficient updates.

D It sorts the list automatically.

Keyed each blocks let Svelte know which items changed by using unique keys, so it updates only those items.

How do you specify the key in a Svelte each block?

A Inside parentheses after the item, like (item.id).

B By adding a key attribute to the HTML element.

C By using a special key function.

D By writing #key before the each block.

The key is placed in parentheses after the item in the each block syntax.

What can happen if you use the array index as a key?

A It can cause incorrect updates when the list changes.

B It improves performance.

C It prevents the list from rendering.

D It automatically sorts the list.

Using indexes as keys can confuse Svelte when items move or change, causing wrong updates.

Which of these is a good choice for a key in a keyed each block?

A A random number generated each render.

B The item's position in the list.

C The item's name if it can repeat.

D A unique id from the item.

A unique and stable id ensures Svelte can track each item correctly.

If you omit the key in an each block, what does Svelte do?

A Throws an error and stops rendering.

B Updates items by their position in the list.

C Automatically generates unique keys.

D Skips rendering the list.

Without keys, Svelte updates list items by their order, which can cause UI issues.

Explain what a keyed each block is in Svelte and why it is useful.

Think about how Svelte tracks list items when they change.

Describe how to write a keyed each block in Svelte with an example.

Remember the parentheses after the item in the each block.