The problem

I recently created a little time tracker app with svelte and had some problems to update the correct list items. In the following picture I illustrate the situation.

The removal of an array element results in wrong list items. The item 3 got the progress of item 2.

The solution

The removal of the array element removes a list item at the end. But it should diff the list items with the corresponding array elements.

After reading the following in the docs I had the solution.

If a key expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end.

I had to provide a key expression to match the list items with array elements.

{#each topics as topic (topic.id)}    
    <Topic data={topic} />
{/each}