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.