Reactive assignments trigger updates in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does a reactive assignment in Svelte do?

A reactive assignment automatically updates the related parts of the UI when the variables it depends on change.

beginner

How do you write a reactive assignment in Svelte?

Use the $: label before an assignment, like $: doubled = count * 2;.

beginner

Why are reactive assignments useful in Svelte?

They keep the UI in sync with data changes without manually updating the DOM or writing extra code.

intermediate

What happens if you assign a reactive variable inside a reactive statement in Svelte?

The reactive statement runs again whenever the variables it depends on change, triggering updates automatically.

advanced

Can reactive assignments cause infinite loops? How to avoid them?

Yes, if a reactive assignment updates a variable it depends on. Avoid by not creating circular dependencies.

What symbol starts a reactive assignment in Svelte?

A &

B $:

C @

D #

Reactive assignments in Svelte start with the $: label.

When does a reactive assignment update in Svelte?

A When the variables it depends on change

B Only when the page reloads

C When the user clicks a button

D Never automatically

Reactive assignments update automatically whenever the variables they depend on change.

Which of these is a correct reactive assignment?

A total = $: price + tax;

B let $total = price + tax;

C total := price + tax;

D $: total = price + tax;

The correct syntax uses $: before the assignment.

What can cause a reactive assignment to run repeatedly in a loop?

A Assigning a variable that triggers itself

B Using <code>$:</code> once

C Not using reactive assignments

D Using let instead of const

Assigning a variable inside a reactive statement that depends on itself can cause infinite loops.

What is the main benefit of reactive assignments in Svelte?

A They make the code run slower

B They require manual DOM updates

C They keep UI and data in sync automatically

D They disable reactivity

Reactive assignments keep the UI updated automatically when data changes.

Explain how reactive assignments work in Svelte and why they are useful.

Think about how Svelte tracks dependencies and updates the UI.

Describe a situation where a reactive assignment could cause an infinite loop and how to prevent it.

Consider what happens if a reactive statement changes a variable it watches.

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