Svelte Interview Questions and Answers

Answer: Full-stack framework built on Svelte

SvelteKit is full-stack framework. File-based routing, SSR, SSG, API routes, adapters for deployment. Like Next.js for React. Batteries included. Production-ready.

Answer: Reactive values accessible across components

Stores provide reactive state outside components. writable, readable, derived. Import and subscribe. Auto-unsubscribe in components. Simple state management.

Answer: Compiler that converts components to efficient JavaScript

Svelte is a compiler, not a framework. It compiles components to highly efficient imperative code at build time. No virtual DOM. Truly reactive. Less code, better performance.

Answer: Routes defined by file structure in src/routes

src/routes/about/+page.svelte → /about. Dynamic: [id]/+page.svelte. Layouts: +layout.svelte. API routes: +server.js. Convention over configuration. Intuitive structure.

Answer: Compile-time framework, no virtual DOM, truly reactive

Svelte compiles to vanilla JS at build time. No runtime overhead. No virtual DOM diffing. Truly reactive - updates DOM surgically. Smaller bundle sizes. Write less code.

Answer: Store with set and update methods

writable(initialValue) creates store. set(newValue) replaces. update(fn) modifies. subscribe(callback) listens. Use $store for auto-subscribe. Most common store type.

Answer: let count = 0;

Just use let: let count = 0. Svelte compiler makes it reactive. Assignments trigger updates: count += 1. No setState, no refs. Simple JavaScript.

Answer: Store that cannot be set from outside

readable(initialValue, start) creates read-only store. Value set internally. Use for time, location, external data. Subscribers can read, not write. Controlled updates.

Answer: {variable}

Use single curly braces: {count}. Any JavaScript expression works: {count * 2}. Auto-escapes HTML. Use {@html} for unescaped HTML (dangerous).

Answer: Store computed from other stores

derived(stores, callback) computes from other stores. Auto-updates when dependencies change. Like computed properties. Can depend on multiple stores. Efficient caching.

Answer: Load function for page data

+page.js exports load function. Runs server and client. Fetches data for page. export async function load({ params }) {}. Returns data as props. SSR-compatible.

Answer: on:click={handler}

Use on: directive: <button on:click={increment}>. Inline: on:click={() => count++}. Event modifiers: on:click|preventDefault. No need to bind this.

Answer: Auto-subscribe in components

$store auto-subscribes and unsubscribes. Use anywhere in component: {$count}. No manual subscribe/unsubscribe. Compiler feature. Very convenient.

Answer: Wraps child routes

+layout.svelte wraps child routes. <slot /> renders child. Nested layouts. Shared UI: nav, footer. Can have +layout.js for layout data. Hierarchical.

Answer: Assignments trigger DOM updates automatically

Reactivity: assignments trigger updates. count = count + 1 updates DOM. Compiler instruments code. No virtual DOM diffing. Surgically updates changed parts only.

Answer: API endpoint handler

+server.js exports HTTP method handlers: GET, POST, etc. API routes. export async function GET() { return json(data); }. Full backend in same project.

Answer: Runs after component first renders

onMount(callback) runs after component mounts. Use for DOM access, API calls, subscriptions. Return cleanup function. Runs in browser only, not SSR.

Answer: Fetches data before page renders

load runs before rendering. Server and client. Access params, url, fetch. Return data as props. Automatic serialization. SSR-aware. Essential for data loading.

Answer: Runs before component is destroyed

onDestroy(callback) runs before component destroyed. Clean up: timers, subscriptions, listeners. Automatically called with onMount return. Essential for memory management.

Answer: $: statement

$: marks reactive statement: $: doubled = count * 2. Re-runs when dependencies change. Like computed properties. Can have multiple. Use for derived values.

Answer: export let propName;

Export variables as props: export let name; export let age = 18. Default values supported. Use: <Child name="John" age={30} />. Simple and intuitive.

Answer: Universal runs both sides, server runs server only

+page.js: universal load (both). +page.server.js: server-only load. Server-only for secrets, database. Universal for API calls. Choose based on needs.

Answer: Runs before DOM updates

beforeUpdate(callback) runs before DOM updates. Access old DOM state. Schedule work before render. Use sparingly - usually unnecessary. Timing-sensitive operations.

Answer: Runs after DOM updates

afterUpdate(callback) runs after DOM updates. Access new DOM state. Sync DOM with state. Use for scroll position, measurements. Runs every update.