Optimized List Rendering with Keyed `#each`

Welcome back! In the previous lesson, you explored how to use the #if, else-if and else blocks in Svelte to manage control flow. These constructs allowed you to conditionally render content and iterate over lists, enhancing the interactivity and responsiveness of your applications. Today, we will build on that foundation by focusing on optimizing list rendering using keyed #each blocks. This lesson will help you understand how to efficiently update the DOM when items are added or removed from a list, ensuring your applications run smoothly and efficiently.

Non-keyed #each blocks in Svelte allow you to iterate over arrays and render lists dynamically. However, they come with limitations, particularly when it comes to updating the DOM. When you modify the value of an #each block, Svelte adds and removes DOM nodes at the end of the block and updates any values that have changed. This can lead to DOM node misalignment, where elements do not update as expected.

Consider the following example:

<script lang="ts">
  import Thing from '$lib/Thing.svelte';

  let things = [
    { id: 1, name: 'apple' },
    { id: 2, name: 'banana' },
    { id: 3, name: 'carrot' },
    { id: 4, name: 'doughnut' },
    { id: 5, name: 'egg' }
  ];

  function removeFirstThing() {
    things.shift();
  }
</script>

<button onclick={removeFirstThing}>Remove first thing</button>

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

Thing.svelte

<script lang="ts">
  const emojis = {
    apple: '🍎',
    banana: '🍌',
    carrot: '🥕',
    doughnut: '🍩',
    egg: '🥚'
  };

  export let name: string;
  const emoji = emojis[name];
</script>

<p>{emoji} = {name}</p>

In this example, when you click the "Remove first thing" button, the first item is removed from the things array. However, the DOM updates by removing the last component and updating the name value in the remaining DOM nodes, but not the emoji. This behavior can lead to inconsistencies in your UI.

Keyed #each blocks provide a solution to the limitations of non-keyed lists. By using unique keys for each item, Svelte can more efficiently update the DOM, ensuring that elements remain in sync with the underlying data. This approach minimizes unnecessary DOM operations and improves the performance of your application.

To implement a keyed #each block, you specify a unique key for each iteration. This key helps Svelte identify which items have changed, allowing it to update only the necessary DOM nodes.