Svelte 37: Acciones Personalizadas en Profundidad
easy⏱ 5 mincoursesvelte
Los tres hooks de ciclo de vida de una acción
La función de la acción en sí se ejecuta una vez, cuando el nodo se monta por primera vez — ahí es donde hacés la configuración inicial, como adjuntar listeners. El update(newParams) opcional se ejecuta en cada cambio posterior a la expresión use:action={params}, sin desmontar nada. El destroy() opcional se ejecuta exactamente una vez, justo antes de que Svelte elimine el nodo del DOM.
function myAction(node, params) {
// runs once, on mount
return {
update(newParams) { /* params changed */ },
destroy() { /* node is being removed */ }
};
}
Saltarse destroy() es una fuga de memoria real
Cualquier cosa que una acción adjunte fuera del nodo mismo — un listener en document/window, un elemento creado manualmente como nuestra burbuja de tooltip, una instancia de librería de terceros — sobrevivirá al componente a menos que destroy() la desmonte explícitamente. Svelte no puede limpiar lo que no conoce.
Construí el tooltip con actualización en vivo
Implementá tooltip(node, text) con mount, update y destroy, aplicala con use:tooltip={...} sobre un botón cuyo texto de tooltip depende de un contador, y luego alterná la visibilidad del propio botón para comprobar que destroy() realmente se ejecuta.