Svelte Interview Questions and Answers

What is Svelte?
  • Svelte is a modern JavaScript framework for building user interfaces. Unlike traditional frameworks, Svelte shifts the work to compile time, producing highly optimized vanilla JS.
How is Svelte different from frameworks like React or Vue?
  • Svelte compiles components to highly efficient imperative code at build time, whereas React and Vue do most of their work in the browser at runtime using virtual DOM.
Who created Svelte?
  • Svelte was created by Rich Harris, a graphics editor at The New York Times.
What language is used to write Svelte components?
  • Svelte components are written using HTML, CSS, and JavaScript or TypeScript within a single `.svelte` file.
What is the file extension of a Svelte component?
  • The file extension for a Svelte component is `.svelte`.
What are the main parts of a Svelte component?
  • A Svelte component typically contains three sections: a <script> tag, a <style> tag, and markup (HTML).
What is reactive assignment in Svelte?
  • Reactive assignment in Svelte uses the `$:` syntax to update values whenever the dependent variables change.
How does Svelte handle reactivity?
  • Svelte handles reactivity by updating the DOM when the underlying variables change, using compiled code without needing a virtual DOM.
What is a store in Svelte?
  • A store is a reactive state container in Svelte used to share state between components.
What are the types of stores in Svelte?
  • Writable, Readable, and Derived stores.
How do you import a writable store?
  • import { writable } from 'svelte/store';
What is the purpose of the `$` prefix with stores?
  • The `$` prefix is used in Svelte to auto-subscribe to a store inside the template and reactively reflect its value.
How does Svelte optimize performance?
  • Svelte compiles code at build time to eliminate runtime overhead and optimize updates directly to the DOM.
How do you pass props in Svelte?
  • Props are declared with the `export` keyword in the child component and passed via attributes in the parent component.
How to handle events in Svelte?
  • Events are handled using the on:event directive, such as on:click={handler}.
How to bind values in Svelte?
  • Svelte uses the bind: directive to create two-way bindings, like bind:value={variable}.
What is the Svelte lifecycle?
  • Svelte provides lifecycle functions like onMount, beforeUpdate, afterUpdate, and onDestroy.
How do you use lifecycle methods in Svelte?
  • You import them from 'svelte' and call them in the <script> section.
What is a slot in Svelte?
  • A slot allows you to pass content from a parent component to a child component, enabling component composition.
What is a named slot in Svelte?
  • A named slot is defined using <slot name="xyz"> and filled in the parent with slot="xyz".
How do you apply styles to a Svelte component?
  • CSS inside a Svelte component is scoped to that component by default, preventing style leakage.
How do you create a transition in Svelte?
  • Use the transition: directive with built-in functions like fade, fly, or custom transitions.
What is a reactive statement in Svelte?
  • A reactive statement uses `$:` to automatically run whenever its dependencies change, like `$: doubled = count * 2`.
How do you create a loop in Svelte?
  • You use the `{#each}` block, like `{#each items as item}` to iterate through arrays.
What is the purpose of the `{#if}` block in Svelte?
  • The `{#if}` block is used for conditional rendering of elements in the DOM.