Svelte Interview Questions

Comprehensive Svelte interview questions covering reactivity, components, SvelteKit, and performance:

Fundamentals

1. What is Svelte and how is it different from other frameworks?

Svelte is a compiler, not a runtime framework. It compiles components to highly efficient imperative code at build time, resulting in smaller bundles and better performance. Unlike React/Vue which ship framework code to the browser, Svelte compiles away.

2. How does reactivity work in Svelte?

Reactivity is triggered by assignments (=). When you assign a value to a variable, Svelte automatically updates the DOM. Use $: for reactive declarations that depend on other values.

3. What is the $ label?

$: creates reactive declarations and statements. Any code after $: will re-run when its dependencies change. Also used to auto-subscribe to stores with $storeName.

4. What are Svelte stores?

Stores provide a way to share state across components. Types: writable (can be set from outside), readable (read-only from outside), and derived (computed from other stores).

Components

5. How do you pass data to child components?

Use props with export let. In parent, pass data with prop={value} syntax.

6. How do components communicate with parents?

Use createEventDispatcher() to dispatch custom events. Parent listens with on:eventName.

7. What is two-way binding in Svelte?

Use bind: directive for form inputs (bind:value) or bind:prop for component props. Parent can use bind:prop={variable} for two-way binding with child.

SvelteKit

8. What is SvelteKit?

SvelteKit is the official application framework for Svelte. It provides routing, server-side rendering, API endpoints, and build optimization.

9. How does routing work in SvelteKit?

Filesystem-based routing. Files in src/routes/ define routes: +page.svelte for pages, +layout.svelte for layouts, +server.ts for API endpoints.

10. What is the load function?

load functions (+page.ts or +page.server.ts) fetch data before rendering. Server load functions run on server, universal load functions can run on both.

Advanced

11. What are actions?

Actions are functions called when an element is created. They can add event listeners, integrate third-party libraries, and return cleanup/update methods.

12. What are transitions and animations?

Built-in transitions (fade, fly, slide, scale) applied with transition: directive. Animations (flip, crossfade) coordinate element movements. Custom transitions via CSS or JS.

13. What is tick()?

tick() returns a promise that resolves when pending state changes are applied to DOM. Useful when you need to read updated DOM values.

14. What are the Svelte lifecycle functions?

onMount (after component renders), onDestroy (before component destroyed), beforeUpdate (before DOM updates), afterUpdate (after DOM updates), tick (wait for state changes).

15. How do you optimize Svelte apps?

• Use keyed each blocks

• Enable immutable option for components

• Use virtual lists for large datasets

• Lazy load components with dynamic imports