Admin

03-25-2026, 12:54 PM #1

Svelte 5 introduced Runes, a completely new reactivity system that replaces the old $: reactive declarations. If you've been working with Svelte 3 or 4, this is a major paradigm shift. Let's break down everything you need to know.

What Are Runes?
Runes are special symbols that start with $ and tell the Svelte compiler how to handle reactivity. They replace the implicit reactivity of Svelte 3/4 with explicit, fine-grained reactivity primitives.

The Core Runes:

1. $state - Declares reactive state
let count = $state(0);
This replaces the old "let count = 0" that was implicitly reactive. Now reactivity is opt-in and explicit.

2. $derived - Computed values
let doubled = $derived(count * 2);
This replaces the old "$: doubled = count * 2" syntax. It automatically tracks dependencies and recalculates when they change.

3. $effect - Side effects
$effect(() => { console.log('Count changed:', count); });
Replaces "$: { console.log(count) }" blocks. Effects run after the DOM updates and automatically track their dependencies.

4. $props - Component props
let { name, age = 25 } = $props();
Replaces "export let name" declarations. Provides destructuring with defaults in a cleaner syntax.

5. $bindable - Two-way binding props
let { value = $bindable('') } = $props();
Used when a prop needs to support bind: directive from parent components.

Migration Tips:
- Use the official migration tool: npx sv migrate svelte-5
- Start with leaf components (components with no children) first
- Test thoroughly - reactivity behavior can differ in edge cases
- $state objects are deeply reactive by default, use $state.raw() for shallow reactivity
- $effect has cleanup support via returning a function

Performance Benefits:
- Fine-grained reactivity means fewer unnecessary re-renders
- Better dead code elimination
- Smaller bundle sizes due to optimized compilation
- Improved TypeScript integration with proper type inference

Common Mistakes:
- Destructuring $state objects breaks reactivity (use $state.snapshot() instead)
- Using $effect for derived values instead of $derived
- Forgetting that $state creates a proxy, not a plain object

What has your experience been with Svelte 5 Runes? Share your thoughts!