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.
Svelte 5 simplifies the component lifecycle to just two events: creation (`onMount`) and destruction (`onDestroy`). Everything in between is handled by granular effects. Use `onMount` for DOM setup or data fetching, and return a synchronous function from it for cleanup. `onDestroy` is for final teardown. The main footgun is using deprecated `beforeUpdate`/`afterUpdate` hooks; use `$effect.pre` and `tick()` instead for precise control.
Read the original → svelte.dev
- #svelte
- #lifecycle
- #frontend
- #reactivity
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.