Svelte Interview Questions and Answers

Sample questions

A few questions from each level with the correct answer and an explanation.

Svelte · Junior

1. What is Svelte?

   Correct answer: A UI framework that is mainly a compiler: components are turned into JavaScript that updates the DOM directly

   Svelte does most of its work at build time. The output is small, framework-light code that changes exactly the DOM nodes that depend on changed state, without a virtual DOM.

2. What is SvelteKit?

   Correct answer: The official application framework for Svelte: routing, data loading, SSR, forms and deployment adapters, built on Vite

   Svelte is the component layer; SvelteKit adds what a full app needs, similar to Next.js for React or Nuxt for Vue.

3. What is the recommended way to create a new SvelteKit project?

   Correct answer: npx sv create my-app

   sv is the official Svelte CLI. It scaffolds the project and can add integrations like TypeScript, ESLint, Vitest or Playwright.

4. What can a .svelte file contain?

   Correct answer: A <script> block, markup and a <style> block, all optional

   A component can have several top-level elements. There is also <script module>, which runs once when the module is evaluated rather than for each instance.

Svelte · Middle

1. What is the difference between $effect and $effect.pre?

   Correct answer: $effect.pre runs before DOM updates (e.g. to save scroll position); $effect runs after the DOM is updated

   $effect.pre replaces beforeUpdate from Svelte 4, and $effect replaces afterUpdate.

2. Why doesn't items.set(k, v) update the UI when items is a plain Map in $state?

   Correct answer: $state only proxies plain objects and arrays; use SvelteMap from svelte/reactivity

   svelte/reactivity also has SvelteSet, SvelteDate, SvelteURL, SvelteURLSearchParams and MediaQuery. Their values aren't made deeply reactive.

3. What does $inspect.trace() help with?

   Correct answer: Placed as the first line of $effect or $derived.by, it logs which dependency triggered the re-run

   Useful when something updates too often or not at all. Like $inspect, it does nothing in production.

4. What is an advantage of snippets over Svelte 4 slots?

   Correct answer: They are values: you can pass parameters, pass them as props, type them with Snippet<[T]> and reuse them in the same component

   Top-level snippets can even be referenced inside <script>, and exported from <script module> if they don't use component state.

Svelte · Senior

1. What model does Svelte 5 reactivity use under the hood?

   Correct answer: Signals: reading state inside an effect or derived registers a dependency, writing it schedules only the affected effects

   Template expressions are effects too. Runes are the syntax over this runtime; Svelte 4 instead relied on the compiler instrumenting assignments.

2. Why did Svelte 5 move from compiler-instrumented let reactivity to runes?

   Correct answer: Svelte 4 reactivity worked only at the top level of components and was hard to reason about; runes make reactivity explicit and work in .svelte.js files and classes

   With $: statements dependencies were determined statically and only at compile time; runes track them at runtime, including through function calls.

3. How are $derived values evaluated?

   Correct answer: Lazily and memoized: recalculated only when read after a dependency changed, and downstream updates are skipped if the result is the same

   Svelte uses push-pull reactivity: changes mark dependents dirty (push), values are recomputed on read (pull). Equal results don't propagate.

4. What is the cost of deep $state proxies, and how do you control it?

   Correct answer: Every property access goes through a proxy and nested objects are wrapped lazily; for large immutable data use $state.raw or plain variables

   Only use $state for values that drive effects, deriveds or the template. Non-reactive data can stay in normal variables.

Combined quizzes with this topic

Questions from several topics at once - just like an interview for a specific role.