Svelte 13: $effect — Efectos Secundarios
easy⏱ 5 mincoursesvelte
$effect se vuelve a ejecutar en cada cambio de dependencia
Leé cualquier valor $state o $derived dentro del callback de $effect, y Svelte se suscribe automáticamente — sin array de dependencias que mantener a mano. Escribir a un valor $state DESDE DENTRO de un $effect puede disparar otra ejecución del efecto, así que los efectos se usan mejor para sincronizar con el mundo exterior, no para derivar un dato a partir de otro (para eso está $derived).
<script>
let query = $state('');
$effect(() => {
console.log('Searching for:', query);
});
</script>
La limpieza corre antes de la siguiente ejecución, y al destruir
El auto-guardado con debounce de abajo inicia un setTimeout cada vez que note cambia. Sin limpieza, escribir rápido apilaría docenas de timeouts pendientes, todos disparándose eventualmente. Retornar () => clearTimeout(id) le dice a Svelte 'cancelá el guardado pendiente ANTERIOR antes de programar uno nuevo' — así solo el timeout de la última tecla presionada llega a dispararse.
<script>
let note = $state('');
let savedAt = $state(null);
$effect(() => {
const id = setTimeout(() => {
localStorage.setItem('note', note);
savedAt = new Date().toLocaleTimeString();
}, 600);
return () => clearTimeout(id); // cancels the stale save
});
</script>
Otros usos clásicos de $effect: document.title, suscripciones
Sincronizar document.title para reflejar el estado de la app, abrir/cerrar una conexión WebSocket, adjuntar un listener global de resize, manejar un loop de animación en <canvas> — todos estos son casos de uso típicos de $effect porque todos salen del grafo reactivo hacia el DOM, la red o las APIs del navegador.