Reactive blocks for side effects in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a reactive block updates a variable?

Consider this Svelte code snippet:

let count = 0;

$: doubled = count * 2;

function increment() {
  count += 1;
}

What is the value of doubled after calling increment() twice?

Svelte

let count = 0;

$: doubled = count * 2;

function increment() {
  count += 1;
}

increment();
increment();

// What is doubled now?

A 0

B 2

C Undefined

D 4

💡 Hint

Reactive blocks run whenever their dependencies change.

Each call to increment() increases count by 1. After two calls, count is 2. The reactive block recalculates doubled as count * 2, so doubled becomes 4.

❓ lifecycle

intermediate

When does a reactive block run in Svelte?

Given this Svelte code:

let a = 1;
let b = 2;

$: sum = a + b;

Which action will cause the reactive block to run?

Svelte

let a = 1;
let b = 2;

$: sum = a + b;

// Which of these triggers the reactive block?
// 1) a = 3;
// 2) b = 5;
// 3) sum = 10;
// 4) console.log(sum);

A All 1, 2, 3, and 4

B Only 1 and 2

C Only 4

D Only 3

💡 Hint

Reactive blocks run when their dependencies change.

The reactive block depends on a and b. Changing either triggers it. Assigning sum directly or logging it does not trigger the block.

📝 Syntax

advanced

Identify the syntax error in this reactive block

What is wrong with this Svelte reactive block?

let x = 5;

$: y = x * 2

$: z = y + 3;

Svelte

let x = 5;

$: y = x * 2

$: z = y + 3;

A Reactive blocks must use curly braces

B Reactive blocks cannot be declared consecutively

C No error, code is valid

D Missing semicolon after reactive statement for y

💡 Hint

Check if semicolons are mandatory in Svelte reactive blocks.

Svelte reactive blocks do not require semicolons. Multiple reactive statements can be declared consecutively. Curly braces are not needed.

🔧 Debug

advanced

Why does this reactive block not update as expected?

Consider this Svelte code:

let items = [1, 2, 3];

$: total = items.reduce((a, b) => a + b, 0);

function addItem(num) {
  items.push(num);
}

After calling addItem(4), why does total not update?

Svelte

let items = [1, 2, 3];

$: total = items.reduce((a, b) => a + b, 0);

function addItem(num) {
  items.push(num);
}

addItem(4);

// What is total now?

A Because items array was mutated directly, Svelte did not detect the change

B Because reduce does not work on arrays

C Because total is not reactive

D Because addItem does not update items

💡 Hint

Think about how Svelte tracks changes in arrays.

Svelte tracks assignments to variables. Mutating an array with push does not trigger reactivity. Assigning a new array (e.g., items = [...items, num]) would update total.

🧠 Conceptual

expert

How to avoid infinite loops with reactive blocks?

Given this Svelte code:

let a = 1;

$: a = a + 1;

What happens when this code runs, and how can you fix it?

Svelte

let a = 1;

$: a = a + 1;

A It causes an infinite loop because the reactive block updates 'a' which triggers itself; fix by removing the reactive assignment

B It runs once and stops; no fix needed

C It throws a syntax error; fix by adding a semicolon

D It updates 'a' to 2 and stops; fix by adding a condition

💡 Hint

Think about what triggers reactive blocks and what happens when they update their own dependencies.

The reactive block changes 'a', which triggers the block again, causing an infinite loop. To fix, avoid assigning to 'a' inside a reactive block that depends on 'a'.