Derived values with $: in Svelte - Step-by-Step Execution

Concept Flow - Derived values with $:

Declare reactive variable with $:

↓

Evaluate dependencies

↓

Update derived value

↓

Reflect changes in UI

↓

Wait for next dependency change

↩Back to Evaluate dependencies

Svelte watches variables used in $: reactive statements and updates derived values automatically when dependencies change.

Execution Sample

Svelte

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

function increment() {
  count += 1;
}

This code defines a reactive derived value 'doubled' that updates automatically when 'count' changes.

Execution Table

Step	Action	count	doubled	UI Update
1	Initialize count=1	1	undefined	No update yet
2	Evaluate $: doubled = count * 2	1	2	Display doubled=2
3	Call increment()	1	2	No immediate UI change
4	Update count += 1	2	2	No UI update yet
5	Re-evaluate $: doubled = count * 2	2	4	Display doubled=4
6	Wait for next change	2	4	UI stable
7	Call increment()	2	4	No immediate UI change
8	Update count += 1	3	4	No UI update yet
9	Re-evaluate $: doubled = count * 2	3	6	Display doubled=6
10	Wait for next change	3	6	UI stable

💡 No more changes; reactive updates stop until count changes again

Variable Tracker

Variable	Start	After Step 4	After Step 8	Final
count	1	2	3	3
doubled	undefined	2	4	6

Key Moments - 2 Insights

Why doesn't the UI update immediately when increment() changes count?

Because the reactive statement $: doubled = count * 2 runs after count changes, updating 'doubled' and then the UI. See steps 3-5 in execution_table.

What triggers the reactive statement to run again?

Any change to variables used inside the $: statement triggers re-evaluation. Here, changing 'count' triggers recalculation of 'doubled' (steps 4 and 8).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'doubled' after step 2?

A 1

B 2

C undefined

D 4

💡 Hint

Check the 'doubled' column in row for step 2 in execution_table

At which step does 'count' first become 3?

A Step 8

B Step 9

C Step 4

D Step 10

💡 Hint

Look at the 'count' column in execution_table rows for steps 4 and 8

If we remove the $: from 'doubled', what happens to the UI updates?

A UI updates 'doubled' only once at start

B UI updates 'doubled' automatically

C UI never updates 'doubled' after count changes

D UI updates 'doubled' twice per count change

💡 Hint

Reactive statements with $: cause automatic updates; without it, 'doubled' won't recalc (see concept_flow)

Concept Snapshot

Svelte's $: syntax creates reactive derived values.
Whenever a dependency changes, the $: statement re-runs.
This updates variables and UI automatically.
Use $: for values based on other reactive variables.
No manual event or watcher needed.

Full Transcript

In Svelte, the $: label marks a reactive statement. When variables used inside it change, Svelte re-runs that statement to update derived values. For example, if 'count' changes, then 'doubled = count * 2' recalculates automatically. This triggers the UI to update with the new value. The execution table shows how 'count' starts at 1, 'doubled' is calculated as 2, then when 'count' increments, 'doubled' updates accordingly. This reactive system saves you from writing manual update code and keeps UI in sync with data.

Practice

1. What does the $: label do in Svelte?

easy

A. It defines a function that runs only once when the component loads.

B. It declares a variable that cannot be changed.

C. It imports external libraries into the component.

D. It creates a reactive statement that updates automatically when dependencies change.

Solution

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

   The $: label marks a reactive statement that runs whenever its dependencies change.

2. Step 2: Compare with other options

   Options B, C, and D describe unrelated features: constants, imports, and lifecycle functions, not reactive statements.

3. Final Answer:

   It creates a reactive statement that updates automatically when dependencies change. -> Option D

4. Quick Check:

   Reactive statements = It creates a reactive statement that updates automatically when dependencies change. [OK]

Hint: Remember: $: means auto-update when data changes [OK]

Common Mistakes:

• Thinking $: declares constants
• Confusing $: with imports or functions
• Believing it runs only once

2. Which of the following is the correct syntax to create a reactive derived value double from count in Svelte?

easy

A. let $double = count * 2;

B. $: double = count * 2;

C. const double = $: count * 2;

D. double = $count * 2;

Solution

1. Step 1: Identify correct reactive syntax

   In Svelte, reactive statements start with $: followed by an assignment. So $: double = count * 2; is correct.

2. Step 2: Check other options for syntax errors

   let $double = count * 2; wrongly uses let $double, which is invalid. const double = $: count * 2; misplaces $:. double = $count * 2; uses $count which is incorrect syntax.

3. Final Answer:

   $: double = count * 2; -> Option B

4. Quick Check:

   Reactive assignment = $: double = count * 2; [OK]

Hint: Reactive statements start with $: followed by assignment [OK]

Common Mistakes:

• Using $ inside variable names
• Placing $: after the variable
• Confusing reactive syntax with normal variable declarations

3. Given the code:

let count = 3;
$: double = count * 2;
count = 5;

What is the value of double after count changes?

medium

A. 10

B. 3

C. 6

D. Undefined

Solution

1. Step 1: Understand reactive update

   Initially, count is 3, so double is 6. When count changes to 5, the reactive statement recalculates double as 5 * 2 = 10.

2. Step 2: Confirm final value of double

   After the update, double is 10, reflecting the latest count.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   double = count * 2 = 10 [OK]

Hint: Reactive values update immediately when dependencies change [OK]

Common Mistakes:

• Assuming double stays at initial value
• Thinking reactive statements run only once
• Confusing variable assignment timing

4. Identify the error in this Svelte code snippet:

let a = 2;
$: b = a + 3
$: c = b * 2;

medium

A. Missing semicolon after b = a + 3 causes syntax error.

B. Reactive statements cannot depend on other reactive variables.

C. No error; code works correctly.

D. Variables a, b, and c must be declared with const.

Solution

1. Step 1: Check syntax and reactive dependencies

   In Svelte, semicolons are optional. Reactive statements can depend on other reactive variables like b.

2. Step 2: Verify variable declarations

   Variables can be declared with let and updated reactively. No need for const here.

3. Final Answer:

   No error; code works correctly. -> Option C

4. Quick Check:

   Reactive chaining allowed = No error; code works correctly. [OK]

Hint: Svelte allows reactive statements to depend on other reactive values [OK]

Common Mistakes:

• Expecting mandatory semicolons
• Believing reactive variables can't chain
• Forcing const declarations unnecessarily

5. You want to create a reactive derived value status that shows "High" if score is above 80, "Medium" if between 50 and 80, and "Low" otherwise. Which Svelte code correctly implements this?

hard

A. $: status = score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low';

B. if (score > 80) { status = 'High'; } else if (score >= 50) { status = 'Medium'; } else { status = 'Low'; }

C. let status = $: score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low';

D. $: status = (score > 80 && 'High') || (score > 80 && 'Medium') || 'Low';

Solution

1. Step 1: Check reactive statement syntax

   $: status = score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low'; uses a single reactive assignment with nested ternary operators, which is valid and concise.

2. Step 2: Evaluate other options

   let status = $: score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low'; incorrectly combines let and $:. if (score > 80) { status = 'High'; } else if (score >= 50) { status = 'Medium'; } else { status = 'Low'; } uses an if-else block but lacks $: label for reactivity. $: status = (score > 80 && 'High') || (score > 80 && 'Medium') || 'Low'; uses logical operators with duplicate conditions that never produce 'Medium'.

3. Final Answer:

   $: status = score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low'; -> Option A

4. Quick Check:

   Correct reactive ternary = $: status = score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low'; [OK]

Hint: Use nested ternary inside $: for concise reactive logic [OK]

Common Mistakes:

• Omitting $: for reactive statements
• Mixing let with $: incorrectly
• Using if-else without reactive label