Reactive assignments trigger updates in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to update the count variable reactively when the button is clicked.

Svelte

let count = 0;

function increment() {
  count [1] 1;
}

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

A*=

B-=

C+=

D/=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-=' decreases the count instead of increasing it.

Using '*=' or '/=' changes the count in unintended ways.

Using count += 1 increases the count by one and triggers reactive updates in Svelte.

2fill in blank

medium

Complete the code to trigger a reactive update by reassigning the array after pushing a new item.

Svelte

let items = [];

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

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

Aitems.pop()

Bitems.slice()

Citems.push()

Ditems

Attempts:

3 left

💡 Hint

Common Mistakes

Using items.push() returns the new length, not the array.

Using items.pop() removes an item instead of triggering update.

Reassigning items = items triggers Svelte's reactivity even after mutating the array.

3fill in blank

hard

Fix the error in the reactive assignment to update the object property correctly.

Svelte

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

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

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

A+=

B=

C-=

D*=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '+=' or '-=' changes the age relative to its current value.

Using '*=' multiplies the age, which is not intended.

Assigning user.age = newAge updates the property, then reassigning user = user triggers the reactive update.

4fill in blank

hard

Fill both blanks to update a nested object property reactively.

Svelte

let settings = { theme: { color: 'blue' } };

function changeColor(newColor) {
  settings.theme.[1] = [2];
  settings = settings;
}

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

Acolor

BnewColor

Ctheme

Dsettings

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'theme' or 'settings' as property names incorrectly.

Assigning the wrong variable to the property.

Assigning settings.theme.color = newColor changes the nested property, then reassigning settings = settings triggers the update.

5fill in blank

hard

Fill all three blanks to update a reactive array element and trigger the update.

Svelte

let scores = [10, 20, 30];

function updateScore(index, value) {
  scores[[1]] = [2];
  scores = [3];
}

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

Aindex

Bvalue

Cscores

Dvalue + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect variables or expressions in the blanks.

Not reassigning the array after mutation.

We assign scores[index] = value to update the element, then reassign scores = scores to trigger reactivity.

Practice

1. In Svelte, what does the $: symbol before a statement do?

easy

A. It comments out the line.

B. It makes the statement reactive, updating when dependencies change.

C. It declares a variable as constant.

D. It imports a module.

Solution

1. Step 1: Understand the role of $: in Svelte

   The $: prefix marks a statement as reactive, meaning it runs whenever its dependencies change.

2. Step 2: Compare with other options

   Options A, B, and D describe unrelated concepts: comments (A), constants (B), and imports (D).

3. Final Answer:

   It makes the statement reactive, updating when dependencies change. -> Option B

4. Quick Check:

   $: means reactive assignment [OK]

Hint: Remember: $: triggers updates automatically [OK]

Common Mistakes:

• Thinking $: declares constants
• Confusing $: with comments
• Assuming $: imports modules

2. Which of the following is the correct syntax for a reactive assignment in Svelte?

easy

A. const $total = price * quantity;

B. let $: total = price * quantity;

C. $: total = price * quantity;

D. total := price * quantity;

Solution

1. Step 1: Identify correct reactive syntax

   The correct syntax uses $: followed by the assignment without extra keywords.

2. Step 2: Analyze incorrect options

   let $: total = price * quantity; wrongly uses let with $:. const $total = price * quantity; misuses const and variable naming. total := price * quantity; uses invalid assignment operator.

3. Final Answer:

   $: total = price * quantity; -> Option C

4. Quick Check:

   Reactive assignment syntax = $: variable = value; [OK]

Hint: Start reactive lines with $: and assign normally [OK]

Common Mistakes:

• Adding let or const before $:
• Using invalid assignment operators like ':='
• Prefixing variable names with $

3. Given the Svelte code:

let count = 2;
$: double = count * 2;
count = 5;

What is the value of double after these lines run?

medium

A. 2

B. 4

C. 5

D. 10

Solution

1. Step 1: Understand initial values and reactive update

   Initially, count is 2, so double becomes 4 reactively.

2. Step 2: Update count and trigger reactive assignment

   When count changes to 5, the reactive line recalculates double = 5 * 2 = 10.

3. Final Answer:

   10 -> Option D

4. Quick Check:

   Reactive updates recalc double = 10 [OK]

Hint: Reactive vars update immediately when dependencies change [OK]

Common Mistakes:

• Assuming double stays at initial value
• Confusing count value with double
• Ignoring reactive recalculation

4. Identify the error in this Svelte reactive assignment:

let a = 3;
$: b = a + c;
let c = 4;

medium

A. Variable c is used before declaration.

B. Reactive assignments cannot use variables.

C. Missing semicolon after let a = 3.

D. Reactive assignments must use const.

Solution

1. Step 1: Check variable usage order

   The reactive assignment uses c before it is declared, causing an error.

2. Step 2: Validate other options

   Options A, B, and C are incorrect because reactive assignments don't require const (A), can use variables (B), and semicolons are optional (C).

3. Final Answer:

   Variable c is used before declaration. -> Option A

4. Quick Check:

   Use variables only after declaration [OK]

Hint: Declare variables before using in reactive assignments [OK]

Common Mistakes:

• Using variables before declaration
• Thinking semicolons are mandatory
• Believing reactive vars must be const

5. You want to keep a database query result reactive in Svelte when the userId changes. Which reactive assignment correctly updates userData?

hard

A. $: userData = fetch(`/api/user/${userId}`).then(res => res.json());

B. userData = fetch(`/api/user/${userId}`).then(res => res.json());

C. $: userData = await fetch(`/api/user/${userId}`).then(res => res.json());

D. $: userData = fetch(`/api/user/${userId}`);

Solution

1. Step 1: Understand reactive assignment with async fetch

   $: userData = fetch(`/api/user/${userId}`).then(res => res.json()); correctly uses $: to reactively assign a promise from fetch when userId changes.

2. Step 2: Analyze other options

   userData = fetch(`/api/user/${userId}`).then(res => res.json()); lacks reactivity. $: userData = await fetch(`/api/user/${userId}`).then(res => res.json()); uses await incorrectly outside async context. $: userData = fetch(`/api/user/${userId}`); assigns fetch promise without parsing JSON.

3. Final Answer:

   $: userData = fetch(`/api/user/${userId}`).then(res => res.json()); -> Option A

4. Quick Check:

   Use $: with fetch and .then() for reactive async [OK]

Hint: Use $: with fetch and .then() for reactive async data [OK]

Common Mistakes:

• Omitting $: for reactive update
• Using await outside async function
• Not parsing fetch response to JSON