Svelte 18: Ciclo de Vida — onMount y onDestroy
easy⏱ 5 mincoursesvelte
onMount: corre una vez, después de que el componente está en el DOM
onMount se dispara después de que Svelte montó los elementos del componente — seguro para medir nodos del DOM, iniciar timers, o disparar un fetch de datos. Si la función que le pasás a onMount retorna a su vez una función, Svelte trata esa función retornada como el handler de onDestroy automáticamente — un atajo para el par montaje+desmontaje cuando están estrechamente relacionados.
<script>
import { onMount } from 'svelte';
onMount(() => {
console.log('mounted!');
// optional: return a cleanup, same as onDestroy
return () => console.log('unmounting via onMount return');
});
</script>
onDestroy: desmontaje garantizado
onDestroy corre exactamente una vez, cuando el componente se remueve del árbol — ya sea porque el usuario navegó a otra parte, un bloque {#if} se desactivó, o un item de {#each} fue eliminado. Es el lugar correcto para cualquier cosa que onMount haya iniciado y necesite desmontaje explícito: clearInterval, cerrar un WebSocket, desuscribirse de un store.
<script>
import { onMount, onDestroy } from 'svelte';
let id;
onMount(() => { id = setInterval(() => console.log('tick'), 1000); });
onDestroy(() => clearInterval(id));
</script>
onMount/onDestroy vs $effect — cuándo usar cada uno
Si tu lógica depende de VALORES REACTIVOS y debería volver a correr cuando cambian, usá $effect. Si es un verdadero par de configuración/desmontaje único que no tiene nada que ver con dependencias reactivas — como registrar un atajo de teclado global durante la vida del componente — onMount/onDestroy comunica esa intención más claramente, aunque un $effect sin dependencias técnicamente podría hacer el mismo trabajo.