Svelte 5 replaces implicit compiler-based reactivity with an explicit runes API. Learn vocabulary for $state (fine-grained reactive signals), $derived (lazy computed values), $effect and $effect.pre (DOM update hooks), $props destructuring, and sharing reactive state across components via .svelte.js modules.
0 / 5 completed
1 / 5
In Svelte 5, a developer writes let count = $state(0). How does this differ from Svelte 4's let count = 0?
Svelte 5's runes system requires explicit reactivity declarations. Plain let assignments are no longer automatically tracked by the compiler. $state() creates a reactive signal. This is a fundamental shift from Svelte 4's implicit reactivity, enabling finer control and better performance for complex applications.
2 / 5
A Svelte 5 developer writes let doubled = $derived(count * 2). What happens when count changes?
$derived creates a lazy computed value. It is not recalculated on every state change; instead, it marks itself as dirty and recalculates on the next read. This avoids unnecessary computation if the derived value is never accessed between two state changes.
3 / 5
What is the purpose of the $effect.pre rune in Svelte 5?
$effect.pre schedules a callback to run before the DOM is updated in reaction to state changes. This is useful for capturing pre-update DOM measurements (e.g., element positions for animations) before Svelte applies the new state to the DOM. Regular $effect runs after DOM updates.
4 / 5
In Svelte 5, how do you make reactive state accessible across multiple components without using a store?
Svelte 5 allows $state (and other runes) to be used in .svelte.js or .svelte.ts files (not just .svelte components). These files export reactive state that multiple components can import and share. This replaces the need for writable stores in many patterns.
5 / 5
A Svelte 5 component prop is declared as let { name = 'World' } = $props(). What does this enable compared to Svelte 4's export let name = 'World'?
$props() enables destructuring with default values using standard JavaScript syntax. In TypeScript, the type is inferred from the destructuring pattern without requiring separate interface declarations. Unlike Svelte 4's export let, this works naturally with rest props (let { name, ...rest } = $props()) and complex default values.