Array and object reactivity gotchas in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Why does this Svelte component not update the list display?

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?

Svelte

  <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>

A Because Svelte does not detect changes when mutating arrays directly; the array reference must change to trigger reactivity.

B Because the push method is asynchronous and the UI updates before the item is added.

C Because the items array is declared with let instead of const, so Svelte ignores changes.

D Because the {#each} block requires a key to detect changes in the array.

💡 Hint

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.

❓ state_output

intermediate

What is the value of 'user.name' after this update in Svelte?

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?

Svelte

  <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>

A The component will throw an error

B Bob

C undefined

D Alice

💡 Hint

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.

📝 Syntax

advanced

Which option correctly updates an array reactively in Svelte?

Choose the code snippet that correctly updates the todos array so Svelte reacts and updates the UI:

A todos.push('new task');

B todos = [...todos, 'new task'];

C todos = todos.concat('new task');

D todos[todos.length] = 'new task';

💡 Hint

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.

🔧 Debug

advanced

Why does this Svelte code fail to update the UI when changing an object property?

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?

Svelte

  <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>

A Because assigning the same object reference does not trigger reactivity in Svelte.

B Because the status property is read-only and cannot be changed.

C Because the function deactivate is not called correctly on button click.

D Because Svelte requires a special method to update nested object properties.

💡 Hint

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'}.

🧠 Conceptual

expert

Which statement best explains Svelte's reactivity with arrays and objects?

Choose the most accurate explanation about how Svelte tracks changes in arrays and objects for UI updates.

A Svelte requires using special reactive stores to track changes in arrays and objects.

B Svelte tracks changes by comparing deep equality of arrays and objects on every update.

C Svelte only tracks changes when the variable reference changes; mutating properties or elements directly does not trigger updates.

D Svelte automatically tracks all nested property changes in objects and arrays without extra code.

💡 Hint

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.