Why Svelte 5 runes clicked for me

Svelte 4’s reactivity was magic — $: and top-level let just worked, until they didn’t. Runes trade a little magic for a lot of clarity.

Three runes do most of the work

• $state — reactive value.
• $derived — computed from other reactive values.
• $effect — run a side effect when dependencies change.

let query = $state('');
let results = $derived(items.filter((i) => i.includes(query)));

$effect(() => {
	console.log(`${results.length} matches for "${query}"`);
});

Why it clicked

The big win: runes work outside .svelte files. Move that logic into a .svelte.ts module and it stays reactive. State is no longer trapped in components.

That portability is what made me stop reaching for stores by default.