Consider this Svelte component that tries to add an item to an array and show the updated list:
<script>
let items = ['apple', 'banana'];
function addItem() {
items.push('orange');
}
</script>
<button on:click={addItem}>Add Orange</button>
<ul>
{#each items as item}
<li>{item}</li>
{/each}
</ul>
Why does clicking the button not update the displayed list?
<script>
let items = ['apple', 'banana'];
function addItem() {
items.push('orange');
}
</script>
<button on:click={addItem}>Add Orange</button>
<ul>
{#each items as item}
<li>{item}</li>
{/each}
</ul>Think about how Svelte tracks changes to variables and when it updates the UI.
Svelte tracks reactivity by detecting when a variable's reference changes. Mutating an array with push does not change the reference, so Svelte does not update the UI. Assigning a new array (e.g., items = [...items, 'orange']) changes the reference and triggers the update.
Given this Svelte code:
<script>
let user = { name: 'Alice', age: 30 };
function updateName() {
user.name = 'Bob';
}
</script>
<button on:click={updateName}>Change Name</button>
<p>Name: {user.name}</p>
After clicking the button, what will be displayed as the name?
<script>
let user = { name: 'Alice', age: 30 };
function updateName() {
user.name = 'Bob';
}
</script>
<button on:click={updateName}>Change Name</button>
<p>Name: {user.name}</p>Consider how Svelte detects changes in object properties.
Svelte does not track changes to nested object properties automatically. Changing user.name directly does not trigger reactivity. The UI still shows the old value 'Alice' unless the whole object is reassigned.
Choose the code snippet that correctly updates the todos array so Svelte reacts and updates the UI:
Remember that Svelte needs the variable reference to change to detect updates.
Only option B creates a new array reference using spread syntax, which triggers Svelte's reactivity. Option B and D mutate the array without changing the reference, so no update.
Look at this Svelte snippet:
<script>
let profile = { username: 'user1', status: 'active' };
function deactivate() {
profile.status = 'inactive';
profile = profile;
}
</script>
<button on:click={deactivate}>Deactivate</button>
<p>Status: {profile.status}</p>
Even though profile = profile; is used, the UI does not update. Why?
<script>
let profile = { username: 'user1', status: 'active' };
function deactivate() {
profile.status = 'inactive';
profile = profile;
}
</script>
<button on:click={deactivate}>Deactivate</button>
<p>Status: {profile.status}</p>Think about how Svelte detects changes to variables and their references.
Assigning the same object reference back to the variable does not count as a change. Svelte only reacts when the variable reference changes. To update nested properties reactively, you must assign a new object, e.g., profile = {...profile, status: 'inactive'}.
Choose the most accurate explanation about how Svelte tracks changes in arrays and objects for UI updates.
Recall how Svelte's compiler detects changes to variables.
Svelte's reactivity system triggers updates only when the variable's reference changes. Direct mutations to nested properties or array elements do not cause UI updates unless the variable is reassigned with a new reference.