$derived: Declarative Computed Values
Compute values that automatically update when their dependencies change.
$derived: Declarative Computed Values is a free Sveltejs Academy lesson on CoddyKit — lesson 3 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.
Computed State
Use $derived(expr) to compute a value from reactive sources.
let count = $state(0);
let doubled = $derived(count * 2);Auto Tracked
Svelte tracks dependencies of the expression automatically. The derived updates when any source changes.
Read-Only
Derived values cannot be assigned directly; they always reflect the computation.
Use in Markup
Read derived values like any state.
<p>Doubled: {doubled}</p>Lazy Evaluation
Derived values compute lazily when read; if nothing reads, the cost is skipped.
Caching
The result is cached until a source changes — no repeated computation per read.
Complex Logic
For multi-statement logic, use the $derived.by(() => { ... }) form.
Compared to $:
$derived replaces $: x = .... More explicit and works outside .svelte files.
Type Inference
TypeScript infers types from the expression automatically.
No Side Effects
Derived must be pure. For side effects use $effect.
Performance
Memoized; recomputes only when dependencies change.
Quick Check
What does $derived return?
Recap
$derived is the modern, explicit way to declare computed values. Use $derived.by for multi-line logic.
Frequently asked questions
Is the “$derived: Declarative Computed Values” lesson free?
Yes — the full text of “$derived: Declarative Computed Values” 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 “$derived: Declarative Computed Values”?
Compute values that automatically update when their 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 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “$derived: Declarative Computed Values” 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
- Why Runes: Moving Beyond the Compiler Magic
- $state: Fine-Grained Reactivity
- $derived: Declarative Computed Values
- $effect: Side Effects