Svelte Interview Questions and Answers

Runes are compiler keywords that make reactivity explicit and also work in .svelte.js and .svelte.ts modules, not just components. $state creates a reactive value, deeply reactive through a proxy for objects and arrays. $derived declares a computed value that updates when its dependencies change. $effect runs a side effect after the DOM updates, tracking whatever reactive values it reads.

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
  $effect(() => console.log(doubled));
</script>
<button onclick={() => count++}>{doubled}</button>

$props() declares component inputs, $bindable() enables two-way binding, and $inspect helps debugging. Effects run in a microtask after rendering and should return a cleanup function for subscriptions.

Unlike $: labels, reactivity follows the value wherever it is defined, so shared state modules no longer need stores. Avoid overusing $effect for derived state; use $derived instead, because effects are for side effects and are harder to reason about.

SvelteKit renders every page on the server by default and then hydrates it on the client, so the first paint is real HTML. You control this per route with page options. export const prerender = true generates static HTML at build time for routes with no per-request data. export const ssr = false disables server rendering so the page is a client-side app, which is useful for heavy browser-only widgets but worse for SEO and first paint. export const csr = false ships no client JavaScript for purely static content. Prerendering discovers links and can also be driven by entries().

Performance levers: keep load functions fast, avoid waterfalls by fetching in parallel and streaming promises, use enhance for progressive form submissions, and split heavy components with dynamic import(). Disabling SSR for a marketing page is usually a mistake.

Use data-sveltekit-preload-data on links so navigation feels instant, inline critical CSS, and test with the build preview because dev-mode behaviour differs.