Array and object reactivity gotchas in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

Why does directly modifying an array element like arr[0] = 5 not trigger reactivity in Svelte?

Svelte's reactivity tracks assignments to variables, not mutations inside arrays or objects. Changing arr[0] does not reassign arr, so Svelte does not detect the change automatically.

beginner

How can you make Svelte react to changes inside an array after modifying an element?

After changing an element, reassign the array to itself like arr = arr. This tells Svelte the variable changed and triggers updates.

intermediate

What is a common gotcha when updating properties inside an object in Svelte?

Modifying a property like obj.prop = value does not trigger reactivity because the object reference stays the same. You must reassign the object, e.g., obj = {...obj}, to notify Svelte.

intermediate

Why is using methods like push() or splice() on arrays tricky in Svelte reactivity?

These methods mutate the array in place without changing its reference. Svelte won't detect changes unless you reassign the array after mutation.

advanced

What is the recommended pattern to update nested objects reactively in Svelte?

Create a new object with updated nested properties using spread syntax, then reassign the main object. For example, obj = {...obj, nested: {...obj.nested, key: value}}.

In Svelte, which action will trigger reactivity after changing an array element?

A Just change the element, e.g., arr[0] = 5

B Reassign the array variable to itself, e.g., arr = arr

C Call arr.push(5)

D No action needed, Svelte detects all changes automatically

Svelte only tracks assignments to variables. Changing an element alone does not trigger reactivity, but reassigning the array variable does.

Which method does NOT trigger Svelte reactivity by itself when used on an array?

A arr.push(newItem)

B arr = arr.filter(...)

C arr = arr

D arr = [...arr, newItem]

arr.push() mutates the array in place without changing its reference, so Svelte won't detect the change unless you reassign the array.

How do you trigger reactivity after changing a property inside an object in Svelte?

A Directly assign the property, e.g., obj.prop = value

B Call a method on the object

C No need to do anything

D Reassign the object with a new copy, e.g., obj = {...obj}

Svelte tracks variable assignments, so you must reassign the object to a new copy to trigger reactivity.

What happens if you mutate a nested object property without reassigning the parent object in Svelte?

A No reactivity is triggered

B Svelte updates the UI automatically

C Svelte throws an error

D The nested property becomes reactive

Svelte does not detect mutations inside nested objects unless the parent object is reassigned.

Which is the best way to update a nested object property reactively in Svelte?

A Call a function to update the nested property

B obj.nested.key = value

C obj = {...obj, nested: {...obj.nested, key: value}}

D Use a Svelte store

Creating a new object with updated nested properties and reassigning triggers Svelte's reactivity.

Explain why directly modifying an array or object property does not trigger reactivity in Svelte and how to fix it.

Think about how Svelte knows a variable changed.

Describe the recommended pattern to update nested object properties reactively in Svelte.

Focus on creating new objects instead of changing existing ones.