SvelteKit 2 paired with Svelte 5 introduces a new reactivity model through Runes, replacing implicit reactive declarations with explicit primitives. Test your command of this new paradigm.
0 / 5 completed
1 / 5
In SvelteKit 2 with Svelte 5 Runes, how do you declare reactive state using the new syntax?
$state() is the new Runes primitive for declaring reactive variables in Svelte 5. Unlike the implicit reactivity of let in Svelte 4, $state() makes reactivity explicit and works inside classes, modules, and .svelte.js files, not just component scripts.
2 / 5
What does $derived replace in Svelte 5 compared to Svelte 4?
$derived() replaces the $: variable = expression pattern for computed values. It takes a function and returns a reactive value that automatically updates when its dependencies change. Unlike $:, it doesn't run arbitrary side effects — use $effect() for those.
3 / 5
What is the purpose of snapshots in SvelteKit 2?
Snapshots let you export a snapshot object from a page with capture and restore methods. When the user navigates away and back (using the browser history), SvelteKit calls restore to reinstate the captured state — ideal for preserving filter selections or partially filled forms.
4 / 5
What does shallow routing in SvelteKit 2 enable?
Shallow routing (via pushState/replaceState from $app/navigation) lets you change the URL and optionally attach state without running SvelteKit's full navigation pipeline. It's useful for modal dialogs that should be shareable as URLs, or for recording scroll positions, without triggering load functions.
5 / 5
How does $effect differ from onMount in Svelte 5?
$effect() is a reactive side-effect primitive that re-runs automatically when any $state or $derived values it reads change — similar to useEffect with auto-tracked dependencies. onMount runs exactly once after the component is first attached to the DOM and does not track reactive dependencies.