Svelte Lifecycle: Mount, Destroy, and Tick
Svelte 5 simplifies the component lifecycle to just two events: creation (onMount) and destruction (onDestroy). Use onMount for DOM setup and return a cleanup function from it. The cleanup only works if the main callback is synchronous, not async.
Why it exists
Traditional lifecycle hooks like beforeUpdate often run on every single component update, even if the change is irrelevant to the hook's logic. This is inefficient. Svelte 5's design aims for surgical precision, ensuring code only runs in response to the specific state changes it depends on.
The mental model
Think of a Svelte 5 component's lifecycle as having only two real events: its birth and its death. The onMount function runs when the component is born and added to the DOM. The onDestroy function runs just before it dies and is removed. Everything that happens in between is not a monolithic "update" event, but a series of granular reactions to state changes managed by effects.
How it works
Svelte provides a few core functions to manage this lifecycle. First, onMount schedules a callback to run as soon as the component has been mounted to the DOM. It does not run during server-side rendering. Second, onDestroy schedules a callback to run immediately before the component is unmounted. Unlike onMount, this is the only hook that also runs on the server. Third, tick() is a utility function, not a hook, that returns a promise. This promise resolves after any pending state changes have been applied to the DOM, allowing you to work with the updated UI.
When to use it
Use onMount for tasks that require the DOM to exist, like initializing a third-party library on a div, fetching client-side data, or setting up global event listeners. Use onDestroy to clean up anything you started in onMount, such as clearing intervals or removing event listeners to prevent memory leaks. Use tick() when you need to perform an action immediately after the DOM reflects a state change, like scrolling to a newly added element in a list.
When not to use it
Avoid the deprecated beforeUpdate and afterUpdate hooks from Svelte 4. They are kept for backward compatibility but are not available in modern rune-based components and are less efficient. Instead, use effect.pre for beforeUpdate logic and tick() or effect for afterUpdate logic. A major footgun is returning a cleanup function from an async onMount callback; it won't work because async functions return a Promise, not your cleanup function.
One canonical example
To run a timer that stops when the component is removed, you can use onMount to start it and return a cleanup function. For example: onMount(() => { const interval = setInterval(logTime, 1000); return () => clearInterval(interval); });. This ensures the interval is automatically cleared when the component is destroyed, preventing memory leaks.
Interview question
What is the consequence of returning a cleanup function from an asynchronous onMount callback in Svelte 5?
- a.The cleanup function will not be registered, leading to potential memory leaks upon component destruction.Correct
- b.The cleanup function will be correctly registered and executed when the component is destroyed.
- c.The onMount callback will immediately throw an error, preventing component initialization.
- d.The component will fail to render its initial DOM structure.
Why? this is the answer
An asynchronous onMount callback implicitly returns a Promise, not the cleanup function itself. Therefore, Svelte cannot register the intended cleanup function, which can lead to memory leaks. Option B is incorrect because the Promise is not interpreted as a cleanup function.
Just read this? Test yourself on what you have been reading.
Read the original → svelte.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on svelte — each one lists the topics its interview covers.
See open roles