From 5f161a17f2a1b0973b8bd5bd237f4b1bbb006cd4 Mon Sep 17 00:00:00 2001 From: Anshul Shah <34605141+anshll@users.noreply.github.com> Date: Wed, 2 Apr 2025 21:52:59 -0700 Subject: [PATCH 1/2] 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. --- .../tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md index a02e764d2..8629fca3e 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md +++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md @@ -2,7 +2,7 @@ title: Keyed each blocks --- -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. +By default, when you modify the iterable the `each` block displays, it will add or remove DOM nodes at the _end_ of the block, and update all nodes' values to reflect the modification. That might not be what you want. It's easier to show why than to explain. Inside `Thing.svelte`, `name` is a dynamic prop but `emoji` is a constant. @@ -11,6 +11,8 @@ Click the 'Remove first thing' button a few times, and notice what happens: 1. It removes the last component. 2. It then updates the `name` value in the remaining DOM nodes, but not the emoji. +To make it concrete, on the first iteration, Svelte removes the last DOM node ('Egg') and updates the remaining nodes to reflect the new data. 'Egg' takes the place of 'Doughnut', 'Doughnut' replaces 'Carrot, and so on. Because the emoji for each ``'s DOM node was initialized at the beginning, with no dependence on state, each node's emoji remains unchanged. + > [!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. One way to fix it would be to make `emoji` a [`$derived`](derived-state) value. But it makes more sense to remove the first `` component altogether rather than remove the _last_ one and update all the others. From d6284d9b070d6199598e1cf43a307b6f7a17d4a7 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 8 Apr 2025 09:33:26 -0400 Subject: [PATCH 2/2] Apply suggestions from code review --- .../01-svelte/04-logic/05-keyed-each-blocks/index.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md index 8629fca3e..65f7f3abc 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md +++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md @@ -2,16 +2,14 @@ title: Keyed each blocks --- -By default, when you modify the iterable the `each` block displays, it will add or remove DOM nodes at the _end_ of the block, and update all nodes' values to reflect the modification. That might not be what you want. +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. It's easier to show why than to explain. Inside `Thing.svelte`, `name` is a dynamic prop but `emoji` is a constant. Click the 'Remove first thing' button a few times, and notice what happens: 1. It removes the last component. -2. It then updates the `name` value in the remaining DOM nodes, but not the emoji. - -To make it concrete, on the first iteration, Svelte removes the last DOM node ('Egg') and updates the remaining nodes to reflect the new data. 'Egg' takes the place of 'Doughnut', 'Doughnut' replaces 'Carrot, and so on. Because the emoji for each ``'s DOM node was initialized at the beginning, with no dependence on state, each node's emoji remains unchanged. +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. > [!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.