Immutable patterns for updates in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output after updating the array immutably?

Consider this Svelte component code that updates a list immutably. What will be the rendered list after clicking the button once?

Svelte

  <script>
    let items = ['apple', 'banana', 'cherry'];
    function addItem() {
      items = [...items, 'date'];
    }
  </script>

  <button on:click={addItem}>Add Date</button>
  <ul>
    {#each items as item}
      <li>{item}</li>
    {/each}
  </ul>

A <ul><li>apple</li><li>banana</li><li>cherry</li></ul>

B <ul><li>date</li></ul>

C <ul><li>apple</li><li>banana</li><li>cherry</li><li>date</li></ul>

D <ul><li>apple</li><li>banana</li><li>date</li></ul>

💡 Hint

Think about how the spread operator creates a new array including the old items plus the new one.

The addItem function creates a new array by copying all existing items and adding 'date' at the end. This updates the items variable immutably, so the list renders with the new item included.

❓ state_output

intermediate

What is the value of the object after immutable update?

Given this Svelte code, what is the value of user after calling updateName()?

Svelte

  <script>
    let user = { name: 'Alice', age: 30 };
    function updateName() {
      user = { ...user, name: 'Bob' };
    }
    updateName();
  </script>

A { name: 'Bob', age: 30 }

B { name: 'Bob' }

C { name: 'Alice', age: 30 }

D { age: 30 }

💡 Hint

Remember the spread operator copies all properties, then the new name replaces the old one.

The spread operator copies all properties from user. Then name: 'Bob' overwrites the name property. So the new object has name as 'Bob' and age unchanged.

🔧 Debug

advanced

Why does this immutable update not trigger reactivity?

Look at this Svelte code snippet. Why does the UI not update after calling updateCount()?

Svelte

  <script>
    let state = { count: 0 };
    function updateCount() {
      state.count += 1;
    }
  </script>

  <button on:click={updateCount}>Increment</button>
  <p>{state.count}</p>

A Because Svelte requires a special method to update nested properties.

B Because the 'count' property is not a reactive variable.

C Because the function 'updateCount' is not called correctly.

D Because the object reference 'state' does not change, Svelte does not detect the update.

💡 Hint

Think about how Svelte tracks changes to variables by their references.

Svelte tracks changes by variable assignment. Mutating a property inside an object does not change the object reference. So Svelte does not detect the change and does not update the UI. To fix this, assign a new object to state.

📝 Syntax

advanced

Which option correctly updates a nested array immutably in Svelte?

Given this state, which code correctly updates the second item in colors immutably?

Svelte

  <script>
    let palette = { colors: ['red', 'green', 'blue'] };
    function updateGreen() {
      // update 'green' to 'lime'
    }
  </script>

A palette = { ...palette, colors: [...palette.colors.slice(0,1), 'lime', ...palette.colors.slice(2)] };

B palette.colors[1] = 'lime';

C palette = { ...palette, colors: palette.colors.splice(1, 1, 'lime') };

D palette = { colors: ['red', 'lime', 'blue'] };

💡 Hint

Remember to create new arrays and objects instead of mutating existing ones.

Option A creates a new array by slicing and inserting 'lime' immutably, then creates a new object with the updated array. Option A mutates the array directly, so no reactivity. Option A replaces colors but loses other properties if any. Option A uses splice which mutates and returns removed items, causing wrong assignment.

🧠 Conceptual

expert

Why is immutability important for Svelte reactivity?

Which statement best explains why immutable updates are crucial for Svelte's reactivity system?

A Svelte automatically detects deep mutations inside objects without new assignments.

B Svelte tracks changes by variable references, so immutable updates create new references triggering reactivity.

C Immutability prevents any changes to variables, ensuring UI never updates unexpectedly.

D Svelte requires all variables to be declared as constants to work properly.

💡 Hint

Think about how Svelte knows when to update the UI.

Svelte's reactivity depends on detecting when a variable is assigned a new value. Immutable updates create new object or array references, which Svelte notices and uses to update the UI. Mutating existing objects without reassignment does not trigger updates.