What lifecycle functions does Svelte provide and when do you use tick?
Assesses fundamental understanding of Svelte conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Svelte components have a small lifecycle API. onMount runs once after the component is first rendered in the browser. It does not run during SSR, so it is the place for DOM measurement, subscriptions or fetching browser-only data, and it can return a cleanup function. onDestroy runs when the component is removed, for clearing timers or unsubscribing. beforeUpdate and afterUpdate fire before and after the DOM is patched.
<script>
import { onMount, tick } from 'svelte';
let el;
onMount(() => { el.focus(); return () => console.log('bye'); });
async function focusSoon() { await tick(); el.focus(); }
</script>
tick() returns a promise that resolves after pending state changes have been applied to the DOM, so it guarantees the DOM reflects your latest assignment. Multiple onMount calls are allowed and cleanups run in reverse order. In Svelte 5, $effect largely replaces onMount and afterUpdate.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.