Reactive declarations (let) in Svelte - Step-by-Step Execution

Concept Flow - Reactive declarations (let)

Declare reactive variable with let

↓

Assign initial value

↓

Change dependency variable

↓

Reactive declaration re-evaluates

↓

Update reactive variable value

↓

UI updates automatically

This flow shows how a reactive variable declared with let updates automatically when its dependencies change, triggering UI updates.

Execution Sample

Svelte

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

This code declares a reactive variable 'doubled' that updates when 'count' changes.

Execution Table

Step	Action	count	doubled	UI Update
1	Initialize count = 1	1	undefined	No
2	Evaluate reactive declaration: doubled = count * 2	1	2	Yes, doubled shows 2
3	Change count to 3	3	2	No
4	Reactive declaration re-evaluates doubled = 3 * 2	3	6	Yes, doubled updates to 6

💡 No more changes; reactive declaration stays updated with count.

Variable Tracker

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

Key Moments - 2 Insights

Why does 'doubled' update automatically when 'count' changes?

Because 'doubled' is declared with $: reactive syntax, it re-runs whenever 'count' changes, as shown between steps 3 and 4 in the execution_table.

Does changing 'count' immediately update 'doubled'?

No, 'doubled' updates after the reactive declaration runs again, not instantly at the assignment, as seen between steps 3 and 4.

Visual Quiz - 3 Questions

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

A 2

B 1

C undefined

D 3

💡 Hint

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

At which step does 'doubled' update to 6?

A Step 2

B Step 4

C Step 3

D Step 1

💡 Hint

Look at the 'doubled' values and UI Update column in the execution_table.

If we set count = 5 instead of 3 at step 3, what would 'doubled' be after step 4?

A 6

B 3

C 10

D 5

💡 Hint

Recall doubled = count * 2; see variable_tracker for how doubled changes with count.

Concept Snapshot

Reactive declarations in Svelte use $: to auto-update variables.
Use let to declare reactive variables.
When dependencies change, reactive code re-runs.
UI updates automatically with new values.
Example: $: doubled = count * 2 updates when count changes.

Full Transcript

In Svelte, reactive declarations use the $: syntax with let variables to automatically update values when dependencies change. For example, if you declare let count = 1 and then $: doubled = count * 2, the variable doubled will automatically update whenever count changes. The execution steps show initializing count, evaluating doubled, changing count, and then doubled updating accordingly. This automatic update triggers UI changes without manual intervention. Understanding this flow helps beginners see how Svelte keeps variables and UI in sync reactively.

Practice

1. What does the $: symbol do in a Svelte component?

easy

A. It imports external modules into the component.

B. It declares a variable as constant and unchangeable.

C. It comments out the following line of code.

D. It marks a statement as reactive, updating when dependencies change.

Solution

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

   The $: prefix is used to declare reactive statements that automatically update when their dependencies change.

2. Step 2: Compare with other options

   Options A, B, and D describe unrelated concepts: imports, constants, and comments, which are not related to $:.

3. Final Answer:

   It marks a statement as reactive, updating when dependencies change. -> Option D

4. Quick Check:

   Reactive declarations use $: = C [OK]

Hint: Remember: $: means reactive update in Svelte [OK]

Common Mistakes:

• Thinking $: declares constants
• Confusing $: with import syntax
• Assuming $: comments code

2. Which of the following is the correct syntax to create a reactive declaration for variable sum that adds a and b in Svelte?

easy

A. let sum = a + b;

B. sum := a + b;

C. $: sum = a + b;

D. const $sum = a + b;

Solution

1. Step 1: Identify reactive declaration syntax

   In Svelte, reactive declarations use $: before the statement to update automatically when dependencies change.

2. Step 2: Check each option

   let sum = a + b; is a normal variable assignment without reactivity. sum := a + b; uses invalid syntax. const $sum = a + b; incorrectly uses const and a dollar sign in the variable name.

3. Final Answer:

   $: sum = a + b; -> Option C

4. Quick Check:

   Reactive declaration = $: sum = a + b; [OK]

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

Common Mistakes:

• Omitting $: for reactive variables
• Using invalid assignment operators like ':='
• Trying to declare reactive constants with const

3. Given the code below, what will be the value of sum after a changes to 5?

let a = 2;
let b = 3;
$: sum = a + b;

// Later in code
a = 5;

medium

A. 8

B. 5

C. 3

D. NaN

Solution

1. Step 1: Understand reactive declaration behavior

   The reactive declaration $: sum = a + b; recalculates sum whenever a or b changes.

2. Step 2: Calculate new value after a changes

   Initially, a = 2 and b = 3, so sum = 5. When a changes to 5, sum updates to 5 + 3 = 8.

3. Final Answer:

   8 -> Option A

4. Quick Check:

   sum updates reactively = 8 [OK]

Hint: Reactive sums update automatically when inputs change [OK]

Common Mistakes:

• Assuming sum stays old value after a changes
• Confusing sum with just a or b
• Expecting syntax error due to reassignment

4. Identify the error in this Svelte reactive declaration:

let x = 1;
$: y = x * 2
$: z = y + 3

medium

A. The code is correct and will work as expected.

B. Reactive declarations cannot depend on other reactive variables.

C. Variables must be declared with const inside reactive declarations.

D. Missing semicolon after y = x * 2 causes syntax error.

Solution

1. Step 1: Check syntax and reactive dependencies

   The code uses reactive declarations correctly. Semicolons are optional in JavaScript and Svelte allows reactive variables to depend on other reactive variables.

2. Step 2: Validate variable declarations

   Variables declared with let can be used reactively. const is not required inside reactive declarations.

3. Final Answer:

   The code is correct and will work as expected. -> Option A

4. Quick Check:

   Reactive chaining allowed = D [OK]

Hint: Reactive declarations can chain and omit semicolons safely [OK]

Common Mistakes:

• Thinking semicolons are mandatory
• Believing reactive vars can't depend on others
• Forcing const instead of let

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

hard

A. let status = if (score > 80) 'High' else if (score >= 50) 'Medium' else 'Low';

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

C. $: if score > 80 then status = 'High' else status = 'Low';

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

Solution

1. Step 1: Understand conditional expressions in reactive declarations

   Svelte reactive declarations use JavaScript syntax. Nested ternary operators correctly express multiple conditions.

2. Step 2: Evaluate each option's correctness

   $: status = score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low'; uses valid nested ternary syntax. let status = if (score > 80) 'High' else if (score >= 50) 'Medium' else 'Low'; uses invalid syntax (no if inside assignment). $: if score > 80 then status = 'High' else status = 'Low'; uses invalid syntax (no then keyword in JS). $: status = score > 80 && 'High' || score >= 50 && 'Medium' || 'Low'; uses logical operators that may cause incorrect evaluation.

3. Final Answer:

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

4. Quick Check:

   Nested ternary for reactive status = A [OK]

Hint: Use nested ternary operators for multi-condition reactive values [OK]

Common Mistakes:

• Using invalid if-else syntax inside reactive declarations
• Confusing logical operators with ternary conditions
• Omitting $: for reactive updates