$: Reactive Statement
The $: reactive statement in Svelte re-runs whenever any value it references changes. Use it to derive values ($: doubled = count * 2), run side effects ($: { ... }), or react conditionally ($: if (...)).
Definition
The $: reactive statement is Svelte's syntax for code that should re-run whenever the values it reads change. It is written as a JavaScript labelled statement — the label happens to be $ — which the Svelte compiler treats specially. Any statement prefixed with $: is re-evaluated automatically whenever one of its dependencies is reassigned, where a dependency is simply any reactive value the statement references.
It is the second pillar of Svelte 4 reactivity, sitting alongside assignment-driven updates. For the concept and when to reach for it, see Svelte reactivity — the basics. For sharing state across components, its companion is the writable store.
Syntax
<script>
let count = 0;
$: doubled = count * 2; // derived value
$: { console.log(count); } // side-effect block
$: if (count > 10) reset(); // conditional side effect
</script>Parameters
The $: reactive statement takes no arguments. It is a label applied to an ordinary statement, not a function you call, so there is no parameter list. What it acts on is determined entirely by which reactive values the statement *references* — those references are its implicit, compiler-detected dependencies.
| Form | Meaning |
|---|---|
$: name = expr | A derived value. name is recomputed from expr whenever a value expr reads changes. No explicit dependency array — the compiler infers them. |
$: { ... } | A side-effect block. The whole block re-runs whenever any value it references is reassigned. |
$: if (cond) { ... } | A conditional side effect. The statement re-runs on every dependency change; the body executes only when cond holds. |
Because there are no arguments, you never register dependencies by hand. If you reference a value inside the statement, it becomes a dependency; if you do not, changes to it will not re-run the statement.
Return value
A reactive statement does not return a value the way a function does. Instead, its effect is defined by when it re-runs: Svelte re-evaluates it whenever any of the reactive values it references change, in addition to running it once during the component's initialisation.
- Derived assignment — for
$: name = expr, the re-run reassignsname, so anything in the markup readingnameupdates. The declared variable is created for you; you do notletit separately. - Dependency tracking — dependencies are the reactive values the statement reads, detected at compile time. Reassign one and the statement re-runs; values it never references are ignored.
- Ordering — multiple reactive statements run in dependency order, not source order. Svelte topologically sorts them so a statement that reads another's output runs after it.
- Timing — re-runs are batched and happen before the DOM updates, so derived values are always consistent with the state that produced them when the view is painted.
One consequence worth stating plainly: only *reassignment* counts as a change. Mutating an object a statement references, without reassigning it, will not re-run the statement — the same assignment rule that governs all Svelte reactivity.
Examples
A derived value that stays in sync
The canonical use. $: doubled = count * 2 recomputes every time count is reassigned, and parity is derived the same way — two dependent values kept consistent with one source, with no manual wiring.
A reactive side effect logging to the page
A $: block need not assign anything — here it appends to a log every time count changes, so you can watch the statement re-run. Note the log itself is updated by reassignment (log = [...log, ...]) so the list stays reactive.
Browser & runtime support
The $: reactive statement is the Svelte 3 and 4 way of expressing reactivity and works in every Svelte 4 project. In Svelte 5, runes ($state, $derived, $effect) are the successor model, but reactive statements remain supported for compatibility. Within a component, keep a reactive statement at the top level of the <script> — it cannot be nested inside a function, since the compiler needs to see it to wire up its dependencies.
Frequently asked questions
Does the Svelte $: reactive statement take any arguments?
When does a $: reactive statement re-run?
How does Svelte know which values a reactive statement depends on?
Can I use $: for side effects and not just derived values?
$: { ... } runs a block and $: if (cond) { ... } runs conditionally, each re-running when its dependencies change. Use the assignment form for derived values and the block form when you need to do something on change.