patternjavascriptsvelteModerate
Svelte reactive declarations ($:) — how and when they run
Viewed 0 times
Svelte 4 (for $: syntax)
reactive declarations$:svelte reactivityderived statedependency trackinginvalidation
Problem
Svelte $: statements run in unexpected order or don't re-run when expected. Developers put side effects in $: where they should use afterUpdate, or miss that $: only tracks variables read during execution.
Solution
Use $: for derived values and simple side effects:
<script>
let count = 0;
let name = 'Alice';
// Derived value — re-runs whenever count changes
$: doubled = count * 2;
$: message =
// Side effect — re-runs when count changes
$: if (count > 10) {
console.log('Count exceeded 10');
alert('Too many items!');
}
// Block — tracks ALL variables used inside
$: {
const formatted = name.toUpperCase();
console.log(formatted, count); // tracks both name and count
}
// Common mistake: assignment doesn't make it reactive
// let doubled = count * 2; // NOT reactive — runs once
</script>
<script>
let count = 0;
let name = 'Alice';
// Derived value — re-runs whenever count changes
$: doubled = count * 2;
$: message =
${name} has ${count} items;// Side effect — re-runs when count changes
$: if (count > 10) {
console.log('Count exceeded 10');
alert('Too many items!');
}
// Block — tracks ALL variables used inside
$: {
const formatted = name.toUpperCase();
console.log(formatted, count); // tracks both name and count
}
// Common mistake: assignment doesn't make it reactive
// let doubled = count * 2; // NOT reactive — runs once
</script>
Why
Svelte's reactive declarations are compiled to code that re-runs the statement when any reactive dependency (variable read during execution) changes. Svelte's compiler analyzes the dependency graph at compile time and inserts invalidation calls after assignments.
Gotchas
- $: runs after the DOM updates but before the browser paints — not synchronous with assignments
- Reactive declarations are ordered by dependency — Svelte topologically sorts them
- Mutating an array/object (push, splice) doesn't trigger reactivity — reassign: arr = arr
- Svelte 5 replaces $: with $derived() and $effect() runes
Code Snippets
Triggering array/object reactivity in Svelte 4
// Mutation doesn't trigger reactivity
let items = [1, 2, 3];
items.push(4); // NOT reactive
items = [...items, 4]; // reactive — reassignment
// Or use splice and reassign
items.splice(0, 1);
items = items; // triggers reactivityContext
When creating derived values or side effects in Svelte 4 components
Revisions (0)
No revisions yet.