Array and object reactivity gotchas in Svelte

Introduction

In Svelte, changes to arrays or objects might not update the screen automatically. This happens because Svelte needs to know when data changes to refresh the view.

When you update an item inside an array and want the UI to show the change.

When you add or remove elements from an array and want the list on screen to update.

When you change a property inside an object and want the UI to reflect the new value.

When you want to keep your app fast and avoid unnecessary updates by understanding how Svelte tracks changes.

Syntax

Svelte

let items = [1, 2, 3];

// Wrong way: items[0] = 10; // UI might not update

// Correct way:
items[0] = 10;
items = [...items]; // reassign to trigger update

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

// Wrong way: user.name = 'Bob'; // UI might not update

// Correct way:
user = { ...user, name: 'Bob' }; // reassign to trigger update

Svelte tracks changes by assignments. Directly changing array elements or object properties does not count as an assignment.

To update arrays or objects reactively, you must reassign the whole array or object.

Examples

Changing an element directly won't update the UI. Reassigning a new array copy triggers reactivity.

Svelte

let numbers = [1, 2, 3];
numbers[0] = 10; // UI might not update

// Fix:
numbers = [...numbers];

Adding to an empty array with push doesn't trigger update. Reassigning a new array copy does.

Svelte

let colors = [];
colors.push('red'); // UI might not update

// Fix:
colors = [...colors];

Changing an object property directly won't update the UI. Reassigning a new object copy triggers reactivity.

Svelte

let profile = { name: 'Sam', age: 30 };
profile.age = 31; // UI might not update

// Fix:
profile = { ...profile, age: 31 };

Adding a new property directly won't update the UI. Reassigning a new object copy does.

Svelte

let emptyObj = {};
emptyObj.newProp = 'value'; // UI might not update

// Fix:
emptyObj = { ...emptyObj, newProp: 'value' };

Sample Program

This Svelte component shows a list of fruits and user info. Buttons update the array and object. Without reassigning, the UI won't refresh. Using spread syntax to create new copies triggers Svelte's reactivity.

Svelte

<script>
  let fruits = ['apple', 'banana', 'cherry'];
  let user = { name: 'Anna', city: 'Paris' };

  function updateFirstFruit() {
    fruits[0] = 'apricot';
    // This alone won't update the UI
    fruits = [...fruits]; // Reassign to trigger update
  }

  function addFruit() {
    fruits.push('date');
    // This alone won't update the UI
    fruits = [...fruits]; // Reassign to trigger update
  }

  function changeUserCity() {
    user.city = 'London';
    // This alone won't update the UI
    user = { ...user }; // Reassign to trigger update
  }
</script>

<h2>Fruits:</h2>
<ul>
  {#each fruits as fruit}
    <li>{fruit}</li>
  {/each}
</ul>
<button on:click={updateFirstFruit}>Change first fruit</button>
<button on:click={addFruit}>Add fruit</button>

<h2>User Info:</h2>
<p>Name: {user.name}</p>
<p>City: {user.city}</p>
<button on:click={changeUserCity}>Change city</button>

Important Notes

Time complexity: Reassigning arrays or objects copies data, so large data can be slower.

Space complexity: Creating new copies uses extra memory temporarily.

Common mistake: Changing array elements or object properties directly without reassigning.

Use this approach whenever you want Svelte to notice changes inside arrays or objects.

Summary

Svelte updates the UI only when you assign new values to variables.

Direct changes inside arrays or objects do not trigger updates.

Always reassign arrays or objects using spread syntax to make changes reactive.

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