How does Svelte handle updating an object in an array within an each loop

user_3528149 0
Viewed 410

Below is a really simple Svelte component.

When you click the button, it updates pages[2].name. How does Svelte handle this? Does it re-evaluate all 3 DIVs? Or does it know to just modify the 3rd DIV's data because the assignment is to pages[2].name?

<script>
    let pages = [{name:'Adam'}, {name:'Barry'}, {name:'Charlie'}];

    function updateName(){
 pages[2].name = 'New Person';
}
</script>

{#each pages as page}
<div>{page.name}</div>
{/each}
<button on:click={updateName}>Update Name</button>
svelte
1 Answers

Short answer: After it creates the div's if you change one value it will evaluate all the items in the array.

Example: If you change 2 names in your array inside the same method the view will only update once.

If you are using a component inside the each loop without (keying) and you change a value will behave as only a value changed so the onMount method wont be fired.

user_41939270
Related