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.