Reactive assignments trigger updates in Svelte - Mini Project: Build & Apply

Reactive Assignments Trigger Updates in Svelte

📖 Scenario: You are building a simple Svelte app that tracks the number of items in a shopping cart and updates the total price reactively.

🎯 Goal: Create a Svelte component that uses reactive assignments to update the total price whenever the quantity or price of items changes.

📋 What You'll Learn

Create a variable quantity initialized to 2

Create a variable pricePerItem initialized to 50

Create a reactive assignment for totalPrice that multiplies quantity and pricePerItem

Add a reactive assignment that updates discountedPrice by subtracting 10 from totalPrice

💡 Why This Matters

🌍 Real World

Reactive assignments in Svelte are used to build interactive web apps where UI updates automatically when data changes, such as shopping carts, dashboards, or forms.

💼 Career

Understanding reactive assignments is essential for frontend developers working with Svelte to create efficient and responsive user interfaces.

1

Set up initial variables

Create two variables in your Svelte component: quantity set to 2 and pricePerItem set to 50.

Svelte

// Your code here

Hint

Use let to declare variables in Svelte.

2

Add reactive assignment for totalPrice

Add a reactive assignment for totalPrice that calculates the product of quantity and pricePerItem using $: syntax.

Svelte

let quantity = 2;
let pricePerItem = 50;

// Your code here

Hint

Use $: totalPrice = quantity * pricePerItem; to create a reactive assignment.

3

Add reactive assignment for discountedPrice

Add another reactive assignment for discountedPrice that subtracts 10 from totalPrice using $: syntax.

Svelte

let quantity = 2;
let pricePerItem = 50;

$: totalPrice = quantity * pricePerItem;

// Your code here

Hint

Use $: discountedPrice = totalPrice - 10; to create the reactive discounted price.

4

Complete the Svelte component with markup

Add markup to display quantity, pricePerItem, totalPrice, and discountedPrice inside <p> tags in your Svelte component.

Svelte

let quantity = 2;
let pricePerItem = 50;

$: totalPrice = quantity * pricePerItem;

$: discountedPrice = totalPrice - 10;

Hint

Use curly braces {} to insert variables inside HTML tags in Svelte.

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