javascript / expert
Snippet
Fine-Grained Reactivity with Svelte 5 Runes
Svelte 5 introduces 'Runes' like $state and $derived to handle reactivity explicitly. Unlike the legacy '$:' syntax, runes provide predictable, fine-grained updates and can be used inside and outside .svelte files.
snippet.js
javascript
1
2
3
4
5
6
7
let count = $state(0);let doubled = $derived(count * 2);$effect(() => {console.log(`Current: ${count}, Doubled: ${doubled}`);return () => console.log('Cleaning up effect...');});
svelte
Breakdown
1
let count = $state(0);
Declares a reactive state variable initialized to 0.
2
let doubled = $derived(count * 2);
Creates a derived value that automatically updates when 'count' changes.
3
$effect(() => { ... });
Runs side effects whenever the reactive dependencies inside the block change.