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

Practice

1. What does a reactive block labeled with $: do in Svelte?

easy

A. It runs the code inside automatically whenever referenced variables change.

B. It defines a new component in Svelte.

C. It creates a CSS style block scoped to the component.

D. It pauses the component rendering until a condition is met.

Solution

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

   The $: label creates a reactive block that runs code automatically when variables it uses change.

2. Step 2: Identify the behavior of reactive blocks

   Reactive blocks are used for side effects like logging or updating related data, triggered by variable changes.

3. Final Answer:

   It runs the code inside automatically whenever referenced variables change. -> Option A

4. Quick Check:

   Reactive block = auto-run on variable change [OK]

Hint: Reactive blocks run code when variables they use change [OK]

Common Mistakes:

• Thinking reactive blocks define components
• Confusing reactive blocks with CSS or styling
• Believing reactive blocks pause rendering

2. Which of the following is the correct syntax to create a reactive block in Svelte?

easy

A. $: { console.log(count); }

B. reactive: { console.log(count); }

C. @reactive { console.log(count); }

D. #: { console.log(count); }

Solution

1. Step 1: Recall the syntax for reactive blocks in Svelte

   Svelte uses the $: label followed by a block or statement to create reactive code.

2. Step 2: Match the correct syntax

   $: { console.log(count); } uses $: { ... } which is the correct way to write a reactive block.

3. Final Answer:

   $: { console.log(count); } -> Option A

4. Quick Check:

   Reactive block syntax = $: [OK]

Hint: Look for the $: label before the block [OK]

Common Mistakes:

• Using 'reactive:' or '@reactive' which are invalid
• Confusing with other symbols like '#' or '@'
• Missing the $: label entirely

3. Consider this Svelte code:

let count = 0;

$: console.log(`Count is ${count}`);

function increment() {
  count += 1;
}

What happens when the increment() function is called?

medium

A. The console logs 'Count is 0' every time.

B. Nothing is logged because reactive blocks don't run on function calls.

C. The console logs 'Count is 1', 'Count is 2', etc., each time increment is called.

D. An error occurs because reactive blocks cannot use template strings.

Solution

1. Step 1: Understand reactive block behavior with variable changes

   The reactive block logs the current value of count whenever count changes.

2. Step 2: Analyze what happens on calling increment()

   Calling increment() increases count by 1, triggering the reactive block to log the updated count.

3. Final Answer:

   The console logs 'Count is 1', 'Count is 2', etc., each time increment is called. -> Option C

4. Quick Check:

   Reactive block logs on variable change = The console logs 'Count is 1', 'Count is 2', etc., each time increment is called. [OK]

Hint: Reactive blocks run when variables they use change [OK]

Common Mistakes:

• Thinking reactive blocks run only once
• Believing reactive blocks ignore function-triggered changes
• Assuming template strings cause errors

4. Identify the error in this Svelte reactive block code:

let name = 'Alice';

$: {
  console.log('Name is ' + Name);
}

medium

A. Reactive blocks cannot use console.log.

B. Variable Name is undefined due to case sensitivity.

C. Missing semicolon after let name declaration.

D. Reactive blocks must be inside a function.

Solution

1. Step 1: Check variable usage inside reactive block

   The reactive block uses Name with uppercase 'N', but the variable declared is name lowercase.

2. Step 2: Understand JavaScript case sensitivity

   JavaScript variables are case sensitive, so Name is undefined, causing a runtime error.

3. Final Answer:

   Variable Name is undefined due to case sensitivity. -> Option B

4. Quick Check:

   Case sensitivity error = Variable Name is undefined due to case sensitivity. [OK]

Hint: Check variable names for exact case match [OK]

Common Mistakes:

• Assuming console.log is disallowed in reactive blocks
• Thinking semicolon omission causes error here
• Believing reactive blocks must be inside functions

5. You want to update a variable doubleCount automatically whenever count changes, using a reactive block. Which code correctly achieves this?

let count = 1;
let doubleCount;

// Choose the correct reactive block

hard

A. $: doubleCount = count / 2;

B. $: { doubleCount = count + 2; }

C. $: doubleCount == count * 2;

D. $: doubleCount = count * 2;

Solution

1. Step 1: Understand the goal to update doubleCount as twice count

   The reactive block should assign doubleCount to count * 2 whenever count changes.

2. Step 2: Evaluate each option for correctness

   $: doubleCount = count * 2; correctly assigns doubleCount = count * 2;. $: { doubleCount = count + 2; } adds 2 instead of multiplying. $: doubleCount == count * 2; uses comparison operator == instead of assignment. $: doubleCount = count / 2; divides instead of multiplying.

3. Final Answer:

   $: doubleCount = count * 2; -> Option D

4. Quick Check:

   Correct reactive assignment = $: doubleCount = count * 2; [OK]

Hint: Use = for assignment, * 2 for doubling [OK]

Common Mistakes:

• Using == instead of = for assignment
• Adding instead of multiplying
• Dividing instead of multiplying