Svelte Interview Preparation
# CHAPTER 26
Svelte Interview Preparation
1. Chapter Introduction
This chapter consolidates the most frequently asked Svelte interview questions with clear, concise answers. Master these and you will confidently handle any Svelte technical interview.---
Section A: Core Fundamentals
Q1. What is Svelte? How is it different from React/Vue? Svelte is a compiler, not a runtime framework. It converts components to optimized vanilla JavaScript at build time. React and Vue run a Virtual DOM diffing algorithm in the browser at runtime. Svelte has no runtime overhead.
Q2. What is Svelte's reactivity model?
Assigning to a let variable triggers reactive DOM updates. The compiler identifies which DOM nodes depend on each variable and generates targeted update code. No setState, no Proxy — just assignment.
Q3. What is the $: label in Svelte?
Reactive declarations. $: area = width * height auto-recalculates when width or height changes. $: { code } blocks run as side effects when dependencies change.
Q4. Why does array.push() not trigger Svelte reactivity?
Svelte detects reactivity through assignment (=). .push() mutates without reassigning. Use arr = [...arr, item] instead.
Q5. What are the three sections of a Svelte component?
<script> for JavaScript logic, HTML markup (template), and <style> for scoped CSS.
Q6. How are CSS styles scoped in Svelte? The compiler adds unique class names to component elements and their style rules, preventing styles from leaking to other components.
Q7. What is export let and why is it used?
Declares a prop — data the parent can pass to the child. Without export, the variable is private to the component.
Q8. What are Svelte Stores?
Reactive containers for shared state. writable for mutable state, readable for external data, derived for computed values.
Q9. What does the $store syntax do?
Auto-subscribes to a store, reads the current value, and automatically unsubscribes when the component is destroyed.
Q10. Explain onMount.
A lifecycle function that runs after the component is first rendered to the DOM. Used for data fetching, DOM manipulation, and setting up subscriptions.
---
Section B: Intermediate
Q11. What is the difference between onMount and onDestroy?
onMount: runs after component renders. onDestroy: runs just before component is removed. Use onDestroy to cleanup intervals, listeners, and subscriptions.
Q12. What is {#await}?
A template block that handles three async states: loading ({#await}), success ({:then}), and error ({:catch}).
Q13. Why are keyed {#each} blocks important?
Without a key, Svelte matches items by position and reuses DOM nodes incorrectly when items are added/removed. Keys tell Svelte to match by identity.
Q14. What is createEventDispatcher?
A Svelte function that creates a dispatcher object. Calling dispatch('eventName', data) fires a custom event that the parent can listen to with on:eventName.
Q15. What is bind:?
Creates two-way data binding. bind:value={variable} syncs the input's value with the variable. bind: on a component prop creates two-way parent-child sync.
Q16. What is SvelteKit? Svelte's official full-stack framework with file-based routing, SSR, API endpoints, and deployment adapters.
Q17. What is a +page.svelte file?
SvelteKit's naming convention for page components. The file's location in src/routes/ determines its URL path.
Q18. What is a +layout.svelte?
A SvelteKit file that wraps all pages in the same directory with shared UI (navbar, footer). Child pages render via <slot />.
Q19. What does a SvelteKit load function do?
Fetches data server-side before the page renders, returning an object available in the page via export let data. Enables SSR.
Q20. What is the difference between +page.js and +page.server.js?
+page.js runs on both client and server. +page.server.js runs ONLY on the server — can access databases and environment secrets safely.
---
Section C: Advanced
Q21. What is setContext/getContext?
API for sharing data through a component subtree without prop drilling. setContext(key, value) in ancestor; getContext(key) in any descendant.
Q22. When to use Context vs Stores? Context: scoped to a subtree (themes, feature config). Stores: global (auth, cart). Context is SSR-safe; global stores can leak between requests in SSR.
Q23. What are Svelte actions?
Reusable DOM behaviors applied with use:actionName. Like React hooks but for DOM elements: use:tooltip, use:clickOutside.
Q24. How do Svelte transitions work?
transition:fade, fly, slide, scale apply CSS/JS animations when elements enter/leave the DOM inside {#if} or {#each} blocks.
Q25. What is animate:flip?
Smoothly animates list item positions when a keyed {#each} array is reordered. Uses FLIP technique (First, Last, Invert, Play).
---
Section D: MCQs (Quick-Fire)
Q26: Svelte is a: a) Library b) Runtime c) Compiler ✓
Q27: $: doubled = count * 2 runs: a) Once b) When count changes ✓ c) Every second
Q28: $store in template: a) Calls .get() b) Auto-subscribes and unsubscribes ✓ c) Creates a new store
Q29: Default {#each} key: a) item.id b) index c) No key — must add (item.id) ✓
Q30: onMount cleanup: a) Called in onDestroy b) Return a function from onMount ✓ c) Use clearTimeout
Q31: Slot fallback content: a) Error b) Renders if no slot content provided ✓ c) Always renders
Q32: $$restProps contains: a) All props b) Props NOT declared with export let ✓ c) Internal state
Q33: Svelte's scoped CSS: a) Uses Shadow DOM b) Compiler adds unique class attributes ✓ c) Requires CSS modules
Q34: {:else} in {#each}: a) Error b) Shows when array is empty ✓ c) Last item
Q35: derived(storeA, $a => $a * 2): a) Mutates storeA b) Creates a new read-only derived store ✓ c) Subscribes
---
Section E: Coding Challenges
Challenge 1: Write a click-outside Svelte action that calls a callback when clicking outside an element.
Challenge 2: Create a debounce store that only emits after N milliseconds of no new values.
Challenge 3: Build a <Tabs> component using slots and context API.
Challenge 4: Implement a writable store that persists to localStorage automatically.
Challenge 5: Write a typewriter transition function.
Challenge 6: Build a simple state machine store with idle, loading, success, error states.
Challenge 7: Create a <InfiniteScroll> component using IntersectionObserver.
Challenge 8: Build a reactive form validation store.
MCQs Summary: 10 Key Questions
Q1. Svelte is? Compiler — Answer: b
Q2. Reactivity triggered by? Assignment — Answer: b
Q3. $: creates? Reactive declaration — Answer: b
Q4. Store auto-subscription syntax? $storeName — Answer: b
Q5. SvelteKit page file? +page.svelte — Answer: b
Q6. Keyed each purpose? Correct DOM recycling — Answer: b
Q7. onMount returns? Optional cleanup function — Answer: b
Q8. Named slot syntax in parent? <div slot="name"> or <svelte:fragment slot="name"> — Answer: b
Q9. derive creates? Read-only computed store — Answer: b
Q10. setContext scope? Descendant components only — Answer: b
Interview Questions
- Q: Walk me through how Svelte's compiler achieves reactivity without a Virtual DOM.
- Q: Build a shopping cart using Svelte stores, explaining your architecture decisions.