Reactive assignments trigger updates in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What is the output after reactive assignment?

Consider this Svelte code snippet:

let count = 1;
$: doubled = count * 2;
count = 3;

What is the value of doubled after the assignment?

Svelte

let count = 1;
$: doubled = count * 2;
count = 3;

A 6

B 2

C 1

D 3

💡 Hint

Reactive assignments update automatically when their dependencies change.

When count changes to 3, the reactive statement recalculates doubled as 3 * 2 = 6.

📝 Syntax

intermediate

Which reactive assignment syntax is correct?

Which of the following is the correct way to write a reactive assignment in Svelte?

A total := price + tax;

B let $: total = price + tax;

C $: total = price + tax;

D total = $: price + tax;

💡 Hint

Reactive assignments start with $: followed by the statement.

Option C uses the correct syntax: $: total = price + tax;. Other options are invalid syntax.

❓ optimization

advanced

How to optimize multiple reactive assignments?

Given these reactive assignments:

$: a = x + y;
$: b = a * 2;
$: c = b + 5;

Which option best reduces unnecessary recalculations?

A Remove reactive statements and assign once: a = x + y; b = a * 2; c = b + 5;

B Combine into one reactive statement: $: { a = x + y; b = a * 2; c = b + 5; }

C Use separate reactive statements but add delays between them.

D Use a reactive function instead of assignments.

💡 Hint

Grouping related reactive assignments can reduce redundant updates.

Combining related reactive assignments in one block ensures they update together efficiently.

🔧 Debug

advanced

Why does this reactive assignment not update?

Consider this code:

let count = 0;
$: doubled = count * 2;
function increment() {
  count += 1;
}

Why might doubled not update when increment() is called?

A The reactive statement syntax is incorrect.

B Reactive assignments only update on initialization.

C The variable <code>count</code> is not declared with <code>let</code>.

D The function <code>increment</code> is never called.

💡 Hint

Check if the function that changes the variable is actually executed.

If increment() is never called, count stays 0, so doubled does not update.

🧠 Conceptual

expert

What triggers reactive assignments to update in Svelte?

Which of the following best describes what triggers reactive assignments to update in Svelte?

A Any change to a variable used inside the reactive statement triggers an update.

B Only changes to variables declared with <code>const</code> trigger updates.

C Reactive assignments update only when the component is mounted.

D Updates happen only when the user interacts with the UI.

💡 Hint

Think about what dependencies reactive statements track.

Svelte tracks variables used inside reactive statements and updates them whenever those variables change.