Svelte Basics & Components Interview Questions

Svelte is a compiler that creates reactive JavaScript modules. Unlike React or Vue that do most of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app, resulting in highly optimized vanilla JavaScript with minimal runtime overhead.

A Svelte component is created in a .svelte file with three main sections: <script> for JavaScript logic, <style> for component-scoped CSS, and the template section for HTML markup. Styles are automatically scoped to the component.

Reactive variables in Svelte are declared using the let keyword in the <script> section. Any variables used in the template are automatically reactive. Example: let count = 0. When count changes, the UI automatically updates.

The $ prefix in Svelte is a special syntax that marks a statement as reactive. It automatically re-runs the code whenever any referenced values change. It's commonly used with derived values and store subscriptions.

Svelte uses #if, :else if, and :else blocks for conditional rendering. Example: {#if condition}...{:else if otherCondition}...{:else}...{/if}. These blocks can contain any valid HTML or component markup.

Svelte uses the #each block for iteration. Syntax: {#each items as item, index}...{/each}. Supports destructuring, key specification, and else blocks for empty arrays. Example: {#each users as {id, name} (id)}.

The export keyword in Svelte is used to declare props that a component can receive. Example: export let name; Makes the variable available as a prop when using the component: <Component name='value' />.

Events in Svelte are handled using the on: directive. Example: <button on:click={handleClick}>. Supports modifiers like preventDefault using |. Example: <form on:submit|preventDefault={handleSubmit}>.

Component composition in Svelte involves building larger components from smaller ones. Components can be imported and used like HTML elements. Example: import Child from './Child.svelte'; then use <Child /> in template.

Styles are added in the <style> block and are automatically scoped to the component. Global styles can be added using :global() modifier. Supports regular CSS with automatic vendor prefixing.

Two-way binding is implemented using the bind: directive. Common with form elements. Example: <input bind:value={name}>. Supports binding to different properties like checked for checkboxes.

Component initialization is handled in the <script> section. Can use onMount lifecycle function for side effects. Top-level code runs on component creation. Support async initialization using IIFE or onMount.

Derived stores are created using derived() function, combining one or more stores into a new one. Values update automatically when source stores change. Support synchronous and asynchronous derivation.

Dynamic components can be loaded using svelte:component directive. Example: <svelte:component this={dynamicComponent} />. Support lazy loading using import(). Handle loading states.

Actions are reusable functions that run when an element is created. Used with use: directive. Can return destroy function. Example: <div use:tooltip={params}>. Support custom DOM manipulation.

Component composition patterns include slots, context API, event forwarding. Support nested components, higher-order components. Handle component communication through props and events.

Reactive statements ($:) automatically re-run when dependencies change. Used for derived calculations and side effects. Support multiple dependencies. Handle complex reactive computations.

Component interfaces use TypeScript with props and events. Define prop types using export let prop: Type. Support interface inheritance. Handle optional props and default values.

Lifecycle methods include onMount, onDestroy, beforeUpdate, afterUpdate. Handle component initialization, cleanup, updates. Support async operations. Manage side effects.

State persistence uses local storage, session storage, or external stores. Implement auto-save functionality. Handle state rehydration. Support offline state management.

Advanced patterns include compound components, render props, higher-order components. Handle complex state sharing. Support flexible component composition. Implement reusable logic.

Optimize rendering using keyed each blocks, memoization, lazy loading. Implement virtual scrolling. Handle large lists. Optimize reactive updates. Monitor performance metrics.

Testing strategies include unit tests, integration tests, component tests. Use testing library/svelte. Implement test utilities. Handle async testing. Support snapshot testing.

State machines handle complex component states. Implement finite state automata. Handle state transitions. Support parallel states. Manage side effects in state changes.

Code splitting uses dynamic imports, route-based splitting. Implement lazy loading strategies. Handle loading states. Optimize bundle size. Support prefetching.

Advanced reactivity includes custom stores, derived state, reactive declarations. Handle complex dependencies. Implement reactive cleanup. Support async reactivity.

Error boundaries catch and handle component errors. Implement error recovery. Support fallback UI. Handle error reporting. Manage error state.

Accessibility implementation includes ARIA attributes, keyboard navigation, screen reader support. Handle focus management. Implement semantic HTML. Support a11y testing.

Internationalization handles multiple languages, RTL support, number/date formatting. Implement translation loading. Support locale switching. Handle dynamic content.

Performance monitoring tracks render times, memory usage, bundle size. Implement performance metrics. Handle performance optimization. Support monitoring tools.