Array and object reactivity gotchas in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to update the array reactively in Svelte.

Svelte

let items = [1, 2, 3];

function addItem() {
  items = [...items, [1]];
}

Drag options to blanks, or click blank then click option'

Aitems.push(4)

B4

Citems[3]

Ditems.length

Attempts:

3 left

💡 Hint

Common Mistakes

Using items.push(4) without reassigning items.

Trying to modify items[3] directly without reassignment.

In Svelte, to update an array reactively, you create a new array with the new item. Using items = [...items, 4] triggers reactivity.

2fill in blank

medium

Complete the code to update an object property reactively in Svelte.

Svelte

let user = { name: 'Alice', age: 25 };

function updateAge() {
  user = { ...user, [1] };
}

Drag options to blanks, or click blank then click option'

Auser.age = user.age + 1

Bage += 1

Cage: user.age + 1

Duser = { age: user.age + 1 }

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign to user.age directly without reassigning user.

Replacing the whole user object without copying existing properties.

To update an object reactively in Svelte, create a new object with the updated property using spread syntax.

3fill in blank

hard

Fix the error in the code to make the array update reactive in Svelte.

Svelte

let numbers = [1, 2, 3];

function addNumber() {
  numbers.push(4);
  [1];
}

Drag options to blanks, or click blank then click option'

Anumbers = [...numbers]

Bnumbers = numbers.push(4)

Cnumbers.push(4)

Dnumbers = numbers

Attempts:

3 left

💡 Hint

Common Mistakes

Reassigning numbers to itself without creating a new array.

Assigning numbers to the result of push, which is a number.

After pushing to the array, reassigning it with a new array copy triggers Svelte's reactivity.

4fill in blank

hard

Fill both blanks to create a reactive filtered array in Svelte.

Svelte

let allItems = [1, 2, 3, 4, 5];

$: filtered = allItems.[1](item => item [2] 3);

Drag options to blanks, or click blank then click option'

Afilter

B>

C<

Dmap

Attempts:

3 left

💡 Hint

Common Mistakes

Using map instead of filter.

Using the wrong comparison operator.

Using filter with a condition item > 3 creates a reactive filtered array.

5fill in blank

hard

Fill all three blanks to create a reactive object property update in Svelte.

Svelte

let settings = { theme: 'light', fontSize: 14 };

function increaseFont() {
  settings = { ...settings, [1]: settings.[2] + [3] };
}

Drag options to blanks, or click blank then click option'

AfontSize

C1

Dtheme

Attempts:

3 left

💡 Hint

Common Mistakes

Updating the wrong property.

Forgetting to spread the old settings.

To update the fontSize reactively, spread the old settings and set fontSize to its current value plus 1.

Practice

1. In Svelte, why does directly modifying an array element like arr[0] = 10 not update the UI?

easy

A. Because Svelte does not support arrays at all.

B. Because arrays are immutable in Svelte.

C. Because you must use a special method to update arrays in Svelte.

D. Because Svelte only tracks assignments to the whole variable, not internal mutations.

Solution

1. Step 1: Understand Svelte's reactivity model

   Svelte updates the UI only when a variable is assigned a new value, not when its internal parts change.

2. Step 2: Analyze direct array element modification

   Changing arr[0] = 10 mutates the array but does not assign a new array to arr, so Svelte does not detect the change.

3. Final Answer:

   Because Svelte only tracks assignments to the whole variable, not internal mutations. -> Option D

4. Quick Check:

   Direct mutation ≠ UI update [OK]

Hint: Always reassign arrays to trigger updates in Svelte [OK]

Common Mistakes:

• Thinking direct mutations trigger updates
• Believing arrays are immutable in Svelte
• Using methods without reassignment

2. Which of the following is the correct way to update an object property reactively in Svelte?

easy

A. obj = { ...obj, key: 'value' };

B. obj.key = 'value';

C. obj.key = 'value'; obj.update();

D. Object.assign(obj, { key: 'value' });

Solution

1. Step 1: Recall Svelte's reactivity for objects

   Svelte detects changes only when the whole object variable is reassigned.

2. Step 2: Evaluate each option

   obj = { ...obj, key: 'value' }; uses spread syntax to create a new object and assign it to obj, triggering reactivity. Direct property assignment like obj.key = 'value'; or Object.assign(obj, { key: 'value' }); mutate the object without reassignment, and obj.key = 'value'; obj.update(); calls a non-existent method.

3. Final Answer:

   obj = { ...obj, key: 'value' }; -> Option A

4. Quick Check:

   Reassign object with spread = reactive update [OK]

Hint: Use spread syntax and reassign objects for reactivity [OK]

Common Mistakes:

• Mutating object properties directly
• Expecting methods like obj.update() to exist
• Using Object.assign without reassignment

3. Given the code:

let numbers = [1, 2, 3];
numbers.push(4);

What will Svelte render if you display {numbers.join(',')} immediately after?

medium

A. 1,2,3,4

B. 1,2,3

C. Error: numbers is not reactive

D. 4

Solution

1. Step 1: Understand array mutation with push()

   The push() method changes the array but does not reassign it.

2. Step 2: Check Svelte's reactivity trigger

   Since numbers is not reassigned, Svelte does not detect the change and the UI remains with the old array.

3. Final Answer:

   1,2,3 -> Option B

4. Quick Check:

   Array mutation without reassignment = no UI update [OK]

Hint: Reassign array after mutation to update UI [OK]

Common Mistakes:

• Assuming push triggers UI update
• Expecting automatic reactivity on mutations
• Confusing errors with silent no-update

4. You have this Svelte code:

let user = { name: 'Alice', age: 25 };

function birthday() {
  user.age += 1;
}

Why does calling birthday() not update the UI showing {user.age}?

medium

A. Because the age property is read-only in Svelte.

B. Because Svelte does not support objects with numeric properties.

C. Because the function does not reassign the user object after mutation.

D. Because the function is missing an await keyword.

Solution

1. Step 1: Analyze mutation inside birthday()

   The function increments user.age directly, mutating the object.

2. Step 2: Check reactivity requirements

   Svelte requires reassignment of the whole object variable to detect changes; direct mutation alone does not trigger UI updates.

3. Final Answer:

   Because the function does not reassign the user object after mutation. -> Option C

4. Quick Check:

   Direct mutation without reassignment = no UI update [OK]

Hint: Always reassign objects after changing properties [OK]

Common Mistakes:

• Thinking numeric properties are special
• Assuming await is needed for sync code
• Believing direct mutation triggers UI update

5. How can you correctly update the first element of an array items reactively in Svelte?

hard

A. items = [...items]; items[0] = 'new';

B. items = ['new', ...items.slice(1)];

C. items[0] = 'new'; items = items;

D. items = items; items[0] = 'new';

Solution

1. Step 1: Understand reactivity with arrays

   Direct mutation like items[0] = 'new' does not trigger updates unless followed by reassignment.

2. Step 2: Evaluate each option

   items = ['new', ...items.slice(1)]; creates a new array with the first element replaced, triggering reactivity correctly. items = [...items]; items[0] = 'new'; creates a shallow copy of the array first, then mutates the first element, which is reactive because the reassignment happens before mutation and the array reference changes. items[0] = 'new'; items = items; mutates first then reassigns the same array reference, which may not trigger reactivity reliably. items = items; items[0] = 'new'; reassigns the same array reference then mutates, which does not trigger reactivity.

3. Final Answer:

   items = [...items]; items[0] = 'new'; -> Option A

4. Quick Check:

   Reassign array with spread then mutate = reactive update [OK]

Hint: Reassign array with spread before mutation for reactivity [OK]

Common Mistakes:

• Mutating after reassignment
• Reassigning without changes
• Mutating before reassignment expecting update