Introduction
Svelte 5 introduces Runes—compiler-driven primitives that bring explicit, fine-grained reactivity to standard JavaScript objects and variables.
React 19 vs Svelte 5 Comparison
Notice how Svelte 5 eliminates hooks, dependency arrays, and updater callbacks in favor of direct mutation:
State & Derived Calculations
Comparing React 19 useState/useMemo hooks with Svelte 5 $state and $derived runes.
❌ React 19
React 19 Implementation
typescript
import { useState, useMemo } from 'react';<p>export function Counter() {const [count, setCount] = useState(0);const double = useMemo(() => count * 2, [count]);</p><p>return (</p><button onClick={() => setCount(c => c + 1)}>Count: {count} (Double: {double})</button>);} ✨ Svelte 5 (Runes)
Svelte 5 Runes
svelte
<script lang="ts">let count = $state(0); let double = $derived(count * 2);</script><button onclick={() => count++}>Count: {count} (Double: {double})</button>Interactive Rune Inspector
Test how $state mutations trigger instant derived calculations and $effect tracking in real-time below:
Interactive Svelte 5 Rune Inspector
Observe $state mutations trigger $derived signals and $effect observers
1. $state Signals
count 0
multiplier 2x
2. $derived Signals
multiplied ($derived) 0
Calculated as: 0 × 2
isEven ($derived) true
3. $effect Log
No effect executions yet.