Reactive Statements: $: block
Run imperative side-effect code whenever its reactive dependencies change.
Reactive Statements: $: block is a free Sveltejs Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The $: Label
The reactive label runs its statement whenever its dependencies change.
$: doubled = count * 2;Statements vs Declarations
It can be a simple assignment, a function call, or a block.
Block Form
Wrap multiple statements in {} for side-effect blocks.
$: {
console.log(count);
localStorage.setItem("count", count);
}Conditional Side Effects
Combine with if for guarded actions.
$: if (count > 10) showAlert();Multiple Reactive Statements
Declare as many as you want; Svelte orders them by dependency.
Top-Level Only
The label must be at the top level of the script. Nested labels are syntax errors.
No Manual Dependencies
Svelte derives dependencies from the right-hand-side references statically.
Heavy Work
Avoid expensive computations in reactive statements. They re-run often.
Pair With Stores
Reactive statements work seamlessly with $store values too.
Order of Evaluation
Svelte topologically sorts statements: later ones can depend on earlier ones safely.
Equivalent of useEffect
Think of $: as a dependency-tracking effect with cleaner syntax.
Quick Check
Can you use $: inside a function?
Recap
$: declares reactive statements at the top level. Use blocks for side effects and conditions.
Frequently asked questions
Is the “Reactive Statements: $: block” lesson free?
Yes — the full text of “Reactive Statements: $: block” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “Reactive Statements: $: block”?
Run imperative side-effect code whenever its reactive dependencies change. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Reactive Statements: $: block” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Reactive Statements: $: block
- Reactive Dependencies and Ordering
- When to Use Stores vs Local State
- Avoiding Stale Closures