Reactive statements ($:) in Svelte - Step-by-Step Execution

Concept Flow - Reactive statements ($:)

Variable changes

↓

$: reactive statement runs

↓

Update dependent variables or run code

↓

UI updates automatically

↓

Wait for next change

When a variable changes, Svelte runs the reactive statement marked with $: to update dependent values or run code, then updates the UI automatically.

Execution Sample

Svelte

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

function increment() {
  count += 1;
}

This code doubles the count reactively whenever count changes.

Execution Table

Step	Action	count	doubled	UI Update
1	Initialize count	0	undefined	count=0, doubled not set
2	Reactive statement runs	0	0	doubled=0 shown
3	Call increment()	0	0	UI shows count=0, doubled=0
4	count += 1	1	0	count updated, doubled stale
5	Reactive statement runs	1	2	doubled updated to 2
6	UI updates	1	2	UI shows count=1, doubled=2
7	Call increment()	1	2	UI shows count=1, doubled=2
8	count += 1	2	2	count updated, doubled stale
9	Reactive statement runs	2	4	doubled updated to 4
10	UI updates	2	4	UI shows count=2, doubled=4

💡 Execution stops after UI updates reflect latest reactive values.

Variable Tracker

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

Key Moments - 3 Insights

Why does the reactive statement run after count changes?

Because Svelte tracks dependencies, when count changes (see step 4 and 8), it reruns the reactive statement (steps 5 and 9) to update doubled.

What happens if you change count without a reactive statement?

Without $:, dependent values like doubled won't update automatically, so UI would show stale values (see step 4 before reactive runs).

Does the reactive statement run on initialization?

Yes, it runs once after initial variable setup (step 2) to set doubled based on count.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of doubled at step 5?

A undefined

B 0

C 2

D 4

💡 Hint

Check the 'doubled' column at step 5 in the execution_table.

At which step does the UI first show count=1 and doubled=2?

A Step 6

B Step 4

C Step 5

D Step 3

💡 Hint

Look for the 'UI Update' column describing count=1, doubled=2.

If the reactive statement was removed, what would doubled be after incrementing count to 2?

A 4

B Stale value (not updated)

C 2

D undefined

💡 Hint

Refer to key_moments about reactive statements updating dependent values.

Concept Snapshot

Reactive statements in Svelte use $: prefix.
They run automatically when dependencies change.
Use them to update variables or run code reactively.
UI updates after reactive statements run.
They run once on initialization too.

Full Transcript

In Svelte, reactive statements start with $:. When a variable used inside such a statement changes, Svelte reruns that statement automatically. For example, if you have let count = 0 and a reactive statement $: doubled = count * 2, then whenever count changes, doubled updates too. This happens without extra code. The UI then updates to show the new values. The reactive statement also runs once after initialization to set initial values. This makes it easy to keep variables and UI in sync without manual updates.