Immutable patterns for updates in Svelte - Mini Project: Build & Apply

Immutable patterns for updates in Svelte

📖 Scenario: You are building a simple Svelte app to manage a list of tasks. Each task has a name and a completion status. You want to update the tasks immutably to keep your app predictable and avoid bugs.

🎯 Goal: Create a Svelte component that holds a list of tasks as an array of objects. Then, add a way to toggle the completion status of a task using immutable update patterns.

📋 What You'll Learn

Create a tasks array with three tasks, each with id, name, and completed properties

Create a variable taskToToggle to hold the id of the task to update

Use an immutable update pattern to create a new array with the toggled task's completed value

Add a button in the markup to toggle the completion status of the first task immutably

💡 Why This Matters

🌍 Real World

Immutable updates help avoid bugs and make state changes predictable in UI frameworks like Svelte. This pattern is common in apps managing lists or collections of data.

💼 Career

Understanding immutable update patterns is essential for frontend developers working with reactive frameworks to write clean, bug-free, and maintainable code.

1

Create the initial tasks array

Create a variable called tasks and set it to an array with these three objects exactly: { id: 1, name: 'Wash dishes', completed: false }, { id: 2, name: 'Do laundry', completed: false }, and { id: 3, name: 'Take out trash', completed: false }.

Svelte

# Your code here

Hint

Use let tasks = [ ... ] with the exact objects inside the array.

2

Add a variable for the task to toggle

Create a variable called taskToToggle and set it to the number 1 to represent the id of the task you want to update.

Svelte

  let tasks = [
    { id: 1, name: 'Wash dishes', completed: false },
    { id: 2, name: 'Do laundry', completed: false },
    { id: 3, name: 'Take out trash', completed: false }
  ];

  // Your code here

Hint

Use let taskToToggle = 1; to store the id of the task to update.

3

Create an immutable update for toggling task completion

Create a new variable called updatedTasks that uses tasks.map() to return a new array. Inside the map, if the task's id matches taskToToggle, return a new object with the same id and name but with completed set to the opposite of its current value. Otherwise, return the task unchanged.

Svelte

  let tasks = [
    { id: 1, name: 'Wash dishes', completed: false },
    { id: 2, name: 'Do laundry', completed: false },
    { id: 3, name: 'Take out trash', completed: false }
  ];

  let taskToToggle = 1;

  // Your code here

Hint

Use tasks.map() and inside the callback, check if task.id === taskToToggle. If yes, return a new object with spread syntax and toggled completed. Otherwise, return the original task.

4

Add a button to toggle the first task's completion immutably

Add a <button> element below the script that, when clicked, sets tasks to updatedTasks. The button text should be Toggle First Task. This completes the immutable update pattern in the Svelte component.

Svelte

  let tasks = [
    { id: 1, name: 'Wash dishes', completed: false },
    { id: 2, name: 'Do laundry', completed: false },
    { id: 3, name: 'Take out trash', completed: false }
  ];

  let taskToToggle = 1;

  let updatedTasks = tasks.map(task =>
    task.id === taskToToggle
      ? { ...task, completed: !task.completed }
      : task
  );

Hint

Add a button with on:click event that sets tasks = updatedTasks. Use accessible aria-label for clarity.

Practice

1. In Svelte, why do we prefer immutable updates when changing state like arrays or objects?

easy

A. Because Svelte does not support mutable updates at all.

B. Because mutable updates are faster and recommended for performance.

C. Because immutable updates prevent any changes to the data forever.

D. Because creating new arrays or objects helps Svelte detect changes and update the UI.

Solution

1. Step 1: Understand Svelte's reactivity system

   Svelte tracks changes by comparing references of variables. If the reference changes, it knows to update the UI.

2. Step 2: Why immutable updates help

   Creating new arrays or objects changes the reference, so Svelte detects the change and updates the screen correctly.

3. Final Answer:

   Because creating new arrays or objects helps Svelte detect changes and update the UI. -> Option D

4. Quick Check:

   Immutable updates = UI updates detected [OK]

Hint: Immutable means new object/array to trigger UI update [OK]

Common Mistakes:

• Thinking mutable updates automatically update UI
• Believing Svelte forbids mutable updates
• Confusing immutability with data never changing

2. Which of the following is the correct way to immutably update an array in Svelte by adding a new item 4 to numbers?

easy

A. numbers.push(4);

B. numbers = [...numbers, 4];

C. numbers[3] = 4;

D. numbers.concat(4);

Solution

1. Step 1: Check each option for immutability

   numbers.push(4); uses push which mutates the original array. numbers[3] = 4; directly assigns an index, mutating the array. numbers.concat(4); calls concat but does not assign the result back, so no update happens.

2. Step 2: Identify the correct immutable update

   numbers = [...numbers, 4]; uses the spread operator to create a new array with the old items plus 4, then assigns it back to numbers, which is the correct immutable pattern.

3. Final Answer:

   numbers = [...numbers, 4]; -> Option B

4. Quick Check:

   Spread operator creates new array [OK]

Hint: Use spread operator and assign new array for immutable update [OK]

Common Mistakes:

• Using push which mutates original array
• Not assigning result of concat back
• Directly modifying array indexes

3. Given this Svelte code:

let todos = [
  { id: 1, text: 'Buy milk', done: false },
  { id: 2, text: 'Walk dog', done: false }
];

// Update to mark todo with id 2 as done
todos = todos.map(todo => todo.id === 2 ? { ...todo, done: true } : todo);

What will be the value of todos after this update?

medium

A. [{ id: 1, text: 'Buy milk', done: false }, { id: 2, text: 'Walk dog', done: true }]

B. [{ id: 1, text: 'Buy milk', done: true }, { id: 2, text: 'Walk dog', done: false }]

C. [{ id: 1, text: 'Buy milk', done: false }, { id: 2, text: 'Walk dog', done: false }]

D. [{ id: 1, text: 'Buy milk', done: true }, { id: 2, text: 'Walk dog', done: true }]

Solution

1. Step 1: Understand the map update logic

   The map goes through each todo. If the todo's id is 2, it creates a new object with done set to true. Otherwise, it returns the original todo unchanged.

2. Step 2: Apply the update to each todo

   Todo with id 1 remains unchanged with done: false. Todo with id 2 is updated to done: true.

3. Final Answer:

   [{ id: 1, text: 'Buy milk', done: false }, { id: 2, text: 'Walk dog', done: true }] -> Option A

4. Quick Check:

   Only todo with id 2 is marked done [OK]

Hint: map + spread updates only matching item immutably [OK]

Common Mistakes:

• Updating wrong todo item
• Mutating original todo instead of creating new
• Not returning updated todo in map

4. What is wrong with this Svelte code that tries to immutably update an object state?

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

// Update age
user.age = 26;
user = user;

medium

A. Svelte requires a special function to update objects immutably.

B. Assigning user = user creates a new object reference, so update works fine.

C. Directly modifying user.age mutates the original object, so Svelte may not detect the change.

D. The code correctly uses immutable update patterns.

Solution

1. Step 1: Identify mutation in the code

   The line user.age = 26 directly changes the existing object, which is a mutation.

2. Step 2: Understand Svelte's change detection

   Assigning user = user does not change the reference, so Svelte does not detect any change and will not update the UI.

3. Final Answer:

   Directly modifying user.age mutates the original object, so Svelte may not detect the change. -> Option C

4. Quick Check:

   Mutating object without new reference breaks reactivity [OK]

Hint: Always create new object to update state immutably [OK]

Common Mistakes:

• Mutating object properties directly
• Assigning same object reference back
• Expecting UI to update without new object

5. You have a nested state object in Svelte:

let profile = {
  name: 'Bob',
  address: { city: 'NY', zip: '10001' }
};

// You want to update zip to '10002' immutably. Which is correct?

hard

A. profile = { ...profile, address: { ...profile.address, zip: '10002' } };

B. profile.address.zip = '10002'; profile = profile;

C. profile = { ...profile, zip: '10002' };

D. profile.address = { zip: '10002' }; profile = profile;

Solution

1. Step 1: Understand nested immutable update

   To update a nested property immutably, create new copies of each level: first the nested object, then the outer object.

2. Step 2: Analyze each option

   profile.address.zip = '10002'; profile = profile; mutates nested property directly, no new reference. profile = { ...profile, zip: '10002' }; updates zip at top level, ignoring nesting. profile.address = { zip: '10002' }; profile = profile; replaces address with incomplete object, losing city. profile = { ...profile, address: { ...profile.address, zip: '10002' } }; correctly creates new address object with updated zip, then new profile object.

3. Final Answer:

   profile = { ...profile, address: { ...profile.address, zip: '10002' } }; -> Option A

4. Quick Check:

   Nested spread creates new objects immutably [OK]

Hint: Spread nested objects to update deeply immutably [OK]

Common Mistakes:

• Mutating nested properties directly
• Not copying nested objects fully
• Losing other nested properties by overwriting