Array and object reactivity gotchas in Svelte - Step-by-Step Execution

Concept Flow - Array and object reactivity gotchas

Initialize reactive array/object

↓

Modify array/object directly

↓

Svelte does NOT detect change

↓

No UI update

↓

Use assignment or methods triggering reactivity

↓

Svelte detects change

↓

UI updates accordingly

Svelte tracks changes only when arrays or objects are reassigned or updated with reactive methods, not when mutated directly.

Execution Sample

Svelte

let items = [1, 2, 3];

function addItem() {
  items.push(4); // direct mutation
  items = items; // triggers reactivity
}

Shows that directly pushing to array doesn't update UI until reassigned.

Execution Table

Step	Action	Array State	Reactivity Triggered?	UI Update
1	Initialize items = [1, 2, 3]	[1, 2, 3]	Yes (initial)	UI shows [1, 2, 3]
2	Call addItem(): Direct push 4 to items	[1, 2, 3, 4]	No	No UI update
3	Assign items = items	[1, 2, 3, 4]	Yes	UI updates to [1, 2, 3, 4]
4	Modify object property directly: { count: 1 } → count = 2	{ count: 2 }	No	No UI update
5	Reassign object to itself	{ count: 2 }	Yes	UI updates to count: 2

💡 Direct mutations do not trigger reactivity; reassignment triggers UI update.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5
items	[1, 2, 3]	[1, 2, 3, 4]	[1, 2, 3, 4]	-	-
obj	{ count: 1 }	-	-	{ count: 2 }	{ count: 2 }

Key Moments - 2 Insights

Why doesn't pushing an item to the array update the UI immediately?

Because Svelte only tracks changes when the variable is reassigned. Direct mutations like push do not trigger reactivity (see execution_table step 2).

How can we make Svelte detect changes after mutating an object property?

By reassigning the object to itself after mutation, which triggers reactivity and UI update (see execution_table steps 4 and 5).

Visual Quiz - 3 Questions

Look at the execution table, what is the array state after step 2?

A [4]

B [1, 2, 3, 4]

C [1, 2, 3]

D []

💡 Hint

Check the 'Array State' column for step 2 in the execution_table.

At which step does the UI update to show the new array with 4 included?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'UI Update' column in the execution_table for when the UI changes.

If we remove the reassignment 'items = items;' in addItem(), what happens to the UI?

A UI shows an error

B UI updates immediately

C UI never updates to show the new item

D UI updates after a delay

💡 Hint

Refer to the key moment about direct mutation without reassignment.

Concept Snapshot

Svelte reactivity for arrays and objects requires reassignment.
Direct mutations like push or property changes do NOT trigger UI updates.
Always reassign the variable (e.g., items = items) after mutation.
This ensures Svelte detects changes and updates the UI.
Remember: reactivity tracks assignments, not mutations.

Full Transcript

In Svelte, when you change an array or object directly, like pushing an item or changing a property, the UI does not update automatically. This is because Svelte's reactivity system only notices when you assign a new value to a variable. So, after mutating an array or object, you must reassign it to itself to trigger the UI update. For example, after pushing to an array, write 'items = items;' to make Svelte update the display. The same applies to objects: change a property, then reassign the object. This way, Svelte knows to refresh the UI. Without reassignment, changes stay invisible on screen.