Reactive assignments trigger updates in Svelte

Introduction

Reactive assignments in Svelte automatically update values and the user interface when data changes. This helps keep your app in sync without extra work.

When you want the screen to update automatically after changing a variable.

When you need to calculate a value based on other variables and want it to refresh instantly.

When you want to avoid manually writing code to update the UI after data changes.

Syntax

Svelte

$: variable = expression;

The $: label marks a reactive assignment.

Whenever any value in the expression changes, the assignment runs again.

Examples

This creates a reactive variable doubled that updates when count changes.

Svelte

$: doubled = count * 2;

This updates greeting whenever name changes.

Svelte

$: greeting = `Hello, ${name}!`;

Sample Program

We start with count as 1 and doubled is 2. Then we change count to 3, so doubled updates to 6 automatically.

Svelte

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

// Simulate changing count
count = 3;

console.log(doubled);

Important Notes

Reactive assignments run immediately when the component starts.

They re-run only when the values they depend on change.

Summary

Use $: to create reactive assignments in Svelte.

They keep your data and UI in sync automatically.

They help write simpler and cleaner code.

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