Skip to content

Commit da86fee

Browse files
anshllRich-Harris
andauthored
docs: Improve explanation of 05-keyed-each-blocks in tutorial (#1252)
* Update index.md I personally was very confused with the previous explanation as to what it meant that the other list items were updated. Explaining it that egg replaced the name attribute for the doughnut, and doughnut replaced the name attribute for the car node, helped me understand what Svelte was actually doing. * Apply suggestions from code review --------- Co-authored-by: Rich Harris <hello@rich-harris.dev>
1 parent 855e667 commit da86fee

File tree

1 file changed

+2
-2
lines changed
  • apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks

1 file changed

+2
-2
lines changed

apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
title: Keyed each blocks
33
---
44

5-
By default, when you modify the value of an `each` block, it will add and remove DOM nodes at the _end_ of the block, and update any values that have changed. That might not be what you want.
5+
By default, updating the value of an `each` block will add or remove DOM nodes at the _end_ of the block if the size changes, and update the remaining DOM. That might not be what you want.
66

77
It's easier to show why than to explain. Inside `Thing.svelte`, `name` is a dynamic prop but `emoji` is a constant.
88

99
Click the 'Remove first thing' button a few times, and notice what happens:
1010

1111
1. It removes the last component.
12-
2. It then updates the `name` value in the remaining DOM nodes, but not the emoji.
12+
2. It then updates the `name` value in the remaining DOM nodes (the text node containing 'doughnut' now contains 'egg', and so on), but not the emoji.
1313

1414
> [!NOTE] If you're coming from React, this might seem strange, because you're used to the entire component re-rendering when state changes. Svelte works differently: the component 'runs' once, and subsequent updates are 'fine-grained'. This makes things faster and gives you more control.
1515

0 commit comments

Comments
 (0)