Ciclo de vida y patrones de limpieza en Svelte 5

Qué son los efectos

Los efectos son una de las características más poderosas —y más incomprendidas— de Svelte 5. Te permiten sincronizar tu estado reactivo con el mundo exterior: el DOM, las APIs del navegador, librerías de terceros o cualquier sistema que no "hable Svelte". Pero a gran poder, gran responsabilidad. Usados incorrectamente, los efectos pueden causar problemas de rendimiento, fugas de memoria y el temido bucle infinito.

Este tutorial te lleva desde los fundamentos de qué son los efectos, pasando por los matices de cuándo se ejecutan y cómo limpiarlos correctamente, hasta los patrones avanzados que harán que tus aplicaciones Svelte 5 sean robustas y mantenibles.

¡En el 90% de los casos no necesitas un $effect() para nada!

¿Por qué es esto importante?

La mayoría del flujo de datos se mantiene completamente dentro del grafo reactivo de Svelte: usa $state para los datos, $derived/$derived.by para los valores calculados, y los manejadores de eventos/atributos ordinarios para las actualizaciones del DOM.

Recurre a un efecto solo cuando debas tocar algo que Svelte no puede gestionar por ti (APIs del navegador, temporizadores, suscripciones, librerías imperativas). Una comprobación rápida: si el código no habla con el mundo exterior, probablemente pertenece a $derived o al marcado directo, no a un efecto.

Los efectos se ejecutan de forma asíncrona después de las actualizaciones del DOM. Este agrupamiento previene ejecuciones innecesarias y mantiene tu aplicación con buena respuesta.

¿Qué es un efecto y por qué lo necesitamos?

El concepto: conectando dos mundos

Imagina tu aplicación Svelte como un universo reactivo autocontenido. Dentro de este universo, los cambios de estado fluyen automáticamente: cuando actualizas una variable $state, todo lo que depende de ella (incluida tu interfaz) se actualiza también. Esto es sincronización reactiva, y Svelte la maneja de forma elegante.

¿Pero qué sucede cuando necesitas interactuar con algo fuera de este universo? Cosas como:

Dibujar en un elemento <canvas>
Configurar un temporizador con setInterval
Suscribirse a una conexión WebSocket
Integrar una librería de gráficos de terceros
Registrar eventos de analítica
Almacenar datos en localStorage

Estos sistemas externos no entienden la reactividad de Svelte. No se actualizan automáticamente cuando cambia tu estado. Aquí es donde entran los efectos —son el puente entre el mundo reactivo de Svelte y todo lo que está fuera de él.

La definición

Un efecto es una función que se ejecuta en respuesta a cambios de estado. Es la forma de decirle a Svelte: "Cada vez que estas piezas de estado cambien, ejecuta este código."

<script>
	let count = $state(0)

	// This effect runs whenever `count` changes
	$effect(() => {
		console.log(`The count is now: ${count}`)
	})
</script>

<button onclick={() => count++}>
	Increment: {count}
</button>

Lo que ocurre aquí:

Cuando el componente se monta por primera vez, el efecto se ejecuta una vez, registrando "The count is now: 0"
Cada vez que haces clic en el botón, count cambia
Svelte detecta que el efecto depende de count
El efecto se vuelve a ejecutar, registrando el nuevo valor

Los efectos son una "salida de emergencia"

Aquí hay algo crucial que entender: los efectos deben ser tu último recurso, no tu primera herramienta. La documentación de Svelte los llama explícitamente una "salida de emergencia". ¿Por qué?

Porque el sistema reactivo de Svelte —$state y $derived— está diseñado para manejar la mayor parte de la sincronización de datos automáticamente. Los efectos son para cuando necesitas salir de ese sistema. Si te encuentras usando efectos en todas partes, probablemente estás luchando contra Svelte en lugar de trabajar con él.

Usos correctos para los efectos:

Sincronización con APIs del navegador (canvas, localStorage, portapapeles)
Integración de librerías de terceros
Configuración de suscripciones (WebSockets, escuchadores de eventos)
Analítica y registro de eventos
Manipulación directa del DOM

Usos incorrectos para los efectos (usa $derived en su lugar):

Calcular valores a partir de otros valores
Transformar datos
Sincronizar un fragmento de estado con otro

Exploraremos esta distinción en profundidad en la sección "Cuándo NO usar $effect".

Cuándo se ejecutan los efectos: el ciclo de vida

Entender cuándo se ejecutan los efectos es esencial para escribir código correcto. Analicemos el ciclo de vida completo.

La ejecución inicial: después del montaje

Los efectos se ejecutan por primera vez después de que el componente se ha montado en el DOM. Esto es importante —significa que puedes acceder con seguridad a los elementos del DOM dentro de los efectos:

<script>
	let canvas
	let color = $state('#ff3e00')
	let size = $state(50)

	$effect(() => {
		// `canvas` is guaranteed to exist here because
		// this runs AFTER the component mounts
		const context = canvas.getContext('2d')
		context.clearRect(0, 0, canvas.width, canvas.height)
		context.fillStyle = color
		context.fillRect(0, 0, size, size)
	})
</script>

<canvas bind:this={canvas} width="100" height="100"></canvas>

Las re-ejecuciones: en una microtarea

Cuando el estado reactivo cambia, los efectos no se ejecutan de inmediato. En su lugar, se programan para ejecutarse en una microtarea —un retraso muy breve que permite que múltiples cambios se agrupen juntos.

<script>
	let width = $state(100)
	let height = $state(100)

	$effect(() => {
		console.log(`Dimensions: ${width} x ${height}`)
	})

	function resize() {
		// These two changes happen in the same synchronous code block
		width = 200
		height = 200
		// The effect does NOT run twice!
		// It runs ONCE after both changes, logging "Dimensions: 200 x 200"
	}
</script>

Por qué importa el agrupamiento:

Rendimiento: Sin agrupamiento, cambiar 10 variables de estado provocaría 10 ejecuciones del efecto. Con agrupamiento, provoca solo una.
Consistencia: Tu efecto siempre ve un estado consistente. Nunca capturas el estado "a mitad" de las actualizaciones.
Eficiencia del DOM: Las actualizaciones del DOM también se agrupan, por lo que el navegador solo repinta una vez.

Después de las actualizaciones del DOM

Los efectos se ejecutan después de que se hayan aplicado las actualizaciones del DOM. Esto significa que si necesitas medir el DOM o interactuar con elementos que acaban de ser añadidos, ya estarán ahí:

<script>
	let items = $state(['Apple', 'Banana'])
	let list

	$effect(() => {
		// This runs AFTER the new item is in the DOM
		console.log(`List has ${list.children.length} items`)
		// If you just pushed 'Cherry', this will log 3, not 2
	})

	function addItem() {
		items.push('Cherry')
	}
</script>

<ul bind:this={list}>
	{#each items as item}
		<li>{item}</li>
	{/each}
</ul>

Renderizado del lado del servidor: los efectos no se ejecutan

$effect nunca se ejecuta durante el renderizado del lado del servidor. Esto significa que las APIs exclusivas del navegador (document, localStorage, canvas, etc.) siempre son seguras de usar dentro de los efectos — nunca se ejecutarán en un entorno Node.js.

Los efectos solo se ejecutan en el navegador. Durante el renderizado del lado del servidor (SSR), se omiten completamente. Esto tiene sentido —no hay DOM en el servidor, ningún canvas en el que dibujar, ningún localStorage en el que escribir.

<script>
	$effect(() => {
		// This code NEVER runs on the server
		// Only in the browser after hydration
		document.title = 'My App'
	})
</script>

Esto es en realidad una característica, no una limitación. Significa que puedes usar con seguridad las APIs exclusivas del navegador dentro de los efectos sin preocuparte por los errores de SSR.

Línea de tiempo visual

Así es como se ve el ciclo de vida de los efectos en la práctica:

Component Created
       │
       ▼
┌─────────────────────────────┐
│  Initial Render (SSR)       │ ← Effects DO NOT run
│  - HTML generated on server │
└─────────────────────────────┘
       │
       ▼ (HTML sent to browser)
       │
┌─────────────────────────────┐
│  Hydration                  │
│  - DOM is connected         │
│  - Component mounts         │
└─────────────────────────────┘
       │
       ▼ (microtask)
       │
┌─────────────────────────────┐
│  Effects Run (First Time)   │ ← Dependencies recorded
└─────────────────────────────┘
       │
       ▼ (user interacts, state changes)
       │
┌─────────────────────────────┐
│  State Update Detected      │
│  - Changes batched          │
│  - DOM updated              │
└─────────────────────────────┘
       │
       ▼ (microtask)
       │
┌─────────────────────────────┐
│  Teardown Runs (if exists)  │ ← Cleanup from previous run
└─────────────────────────────┘
       │
       ▼
┌─────────────────────────────┐
│  Effect Re-runs             │ ← New dependencies recorded
└─────────────────────────────┘

Entendiendo las dependencias

Qué se rastrea

Uno de los aspectos más elegantes de $effect es que automáticamente determina de qué estado depende. No tienes que listar dependencias como en el useEffect de React —Svelte las rastrea en tiempo de ejecución.

La regla básica

Cuando un efecto se ejecuta, Svelte observa qué valores reactivos (cualquier cosa creada con $state, $derived o $props) se leen de forma sincrónica. Esos se convierten en las dependencias del efecto. Cuando cualquiera de ellos cambia, el efecto se vuelve a ejecutar.

<script>
	let firstName = $state('John')
	let lastName = $state('Doe')
	let age = $state(30)

	$effect(() => {
		// This effect reads `firstName` and `lastName`
		// It does NOT read `age`
		console.log(`Name: ${firstName} ${lastName}`)
	})
</script>

<!-- Changing firstName or lastName will re-run the effect -->
<!-- Changing age will NOT re-run the effect -->

El rastreo ocurre en tiempo de ejecución

Las dependencias se determinan cada vez que el efecto se ejecuta, no en tiempo de compilación. Esto permite patrones poderosos con lógica condicional:

<script>
	let useFullName = $state(true)
	let firstName = $state('John')
	let lastName = $state('Doe')
	let nickname = $state('Johnny')

	$effect(() => {
		if (useFullName) {
			// When useFullName is true, we depend on firstName and lastName
			console.log(`Full name: ${firstName} ${lastName}`)
		} else {
			// When useFullName is false, we depend on nickname instead
			console.log(`Nickname: ${nickname}`)
		}
	})
</script>

Lo que ocurre:

Inicialmente, useFullName es true, por lo que el efecto lee firstName y lastName
Dependencias: useFullName, firstName, lastName
Si cambias nickname, el efecto NO se vuelve a ejecutar (no es una dependencia actual)
Si cambias useFullName a false, el efecto se vuelve a ejecutar
Ahora lee nickname, por lo que las dependencias se convierten en: useFullName, nickname
¡Ahora cambiar firstName NO vuelve a ejecutar el efecto!

El requisito de sincronía

Aquí hay una regla crítica: solo los valores leídos de forma sincrónica se convierten en dependencias. Cualquier cosa leída después de un await o dentro de un setTimeout NO se rastrea.

<script>
	let color = $state('#ff3e00')
	let size = $state(50)
	let canvas

	$effect(() => {
		const context = canvas.getContext('2d')
		context.clearRect(0, 0, canvas.width, canvas.height)

		// `color` is read synchronously → it IS a dependency
		context.fillStyle = color

		setTimeout(() => {
			// `size` is read AFTER a delay → it is NOT a dependency
			context.fillRect(0, 0, size, size)
		}, 0)
	})
</script>

En este ejemplo:

Cambiar color volverá a ejecutar el efecto - PREFERIBLE porque se lee de forma sincrónica
Cambiar size NO volverá a ejecutar el efecto - EVITAR porque se lee de forma asíncrona

¿Por qué este diseño? Se trata de previsibilidad. Svelte no puede saber qué ocurrirá en el futuro (después de que se completen las operaciones asíncronas), por lo que solo rastrea lo que puede observar de forma sincrónica.

Rastreo de objetos vs. propiedades

Svelte rastrea a nivel de propiedad, no a nivel de objeto. Esto es matizado e importante:

<script>
	let state = $state({ value: 0 })
	let derived = $derived({ value: state.value * 2 })

	// This effect reads the `state` OBJECT, not `state.value`
	$effect(() => {
		state // Just referencing the object
		console.log('Effect 1 ran')
	})

	// This effect reads `state.value`
	$effect(() => {
		state.value // Reading the property
		console.log('Effect 2 ran')
	})

	// This effect depends on `derived`, which is a NEW object each time
	$effect(() => {
		derived
		console.log('Effect 3 ran')
	})
</script>

<button onclick={() => state.value++}>Increment</button>

Cuando haces clic en el botón:

Effect 1: NO se vuelve a ejecutar (la referencia al objeto state no cambió, solo una propiedad dentro de él)
Effect 2: SÍ se vuelve a ejecutar (lee state.value, que cambió)
Effect 3: SÍ se vuelve a ejecutar (derived es un objeto nuevo cada vez porque $derived retorna un objeto nuevo)

Rastreo a Través de Llamadas a Funciones

Las dependencias se rastrean incluso cuando se accede a los valores de forma indirecta a través de funciones:

<script>
	let count = $state(0)

	function getCount() {
		return count // This reads `count`
	}

	$effect(() => {
		// Even though we call a function, Svelte tracks that
		// `count` was ultimately read
		console.log(`Count via function: ${getCount()}`)
	})
</script>

Esto funciona porque el rastreo de Svelte ocurre en el momento de la lectura, sin importar cuántas llamadas a funciones de profundidad estés.

Salirse del Rastreo: La Función `untrack`

A veces quieres leer un valor sin crear una dependencia. Usa la función untrack:

<script>
	import { untrack } from 'svelte'

	let logPrefix = $state('[LOG]')
	let count = $state(0)

	$effect(() => {
		// We want to re-run when `count` changes
		// but NOT when `logPrefix` changes
		const prefix = untrack(() => logPrefix)
		console.log(`${prefix} Count: ${count}`)
	})
</script>

Ahora el efecto solo depende de count. Cambiar logPrefix no disparará una nueva ejecución.

Patrones de Limpieza

La Función de Desmontaje

Los efectos frecuentemente configuran cosas que necesitan ser limpiadas: temporizadores, suscripciones, escuchadores de eventos, etc. La función de desmontaje (o función de limpieza) es la manera correcta de manejar esto.

El Patrón Básico

Un efecto puede retornar una función. Esta función se ejecuta:

Inmediatamente antes de que el efecto se vuelva a ejecutar (para limpiar la ejecución anterior)
Cuando el componente es destruido (para limpiar completamente)

<script>
	let count = $state(0)
	let interval = $state(1000)

	$effect(() => {
		// This runs when the effect starts or re-runs
		console.log(`Setting up interval: ${interval}ms`)

		const id = setInterval(() => {
			count++
		}, interval)

		// This TEARDOWN function runs before the next run or on destroy
		return () => {
			console.log(`Cleaning up interval: ${id}`)
			clearInterval(id)
		}
	})
</script>

<p>Count: {count}</p>
<button onclick={() => (interval = interval / 2)}>Faster</button>
<button onclick={() => (interval = interval * 2)}>Slower</button>

Cuando haces clic en "Más rápido":

El estado interval cambia
Svelte programa el efecto para que se vuelva a ejecutar
La función de desmontaje se ejecuta primero: clearInterval(id) limpia el intervalo anterior
El cuerpo del efecto se ejecuta: se crea un nuevo intervalo con el nuevo tiempo

Por Qué Importa el Desmontaje

Prevención de Fugas de Memoria

Cada efecto que crea un temporizador, abre un socket, registra un escuchador de eventos o inicia un observador debe retornar una función de desmontaje. Omitirla produce fugas de recursos de forma silenciosa — cada nueva ejecución agrega un nuevo escuchador sin eliminar el anterior.

Sin una limpieza adecuada, acumularás recursos que nunca fueron liberados. Aquí hay un escenario común:

MALO: Sin limpieza

<script>
	let isActive = $state(true)

	$effect(() => {
		if (isActive) {
			// This adds a new listener every time `isActive` becomes true
			// Old listeners are NEVER removed!
			window.addEventListener('resize', handleResize)
		}
	})

	function handleResize() {
		console.log('Window resized')
	}
</script>

BUENO: Limpieza adecuada

<script>
	let isActive = $state(true)

	$effect(() => {
		if (!isActive) return // Guard clause

		function handleResize() {
			console.log('Window resized')
		}

		window.addEventListener('resize', handleResize)

		return () => {
			// Clean up when isActive changes or component unmounts
			window.removeEventListener('resize', handleResize)
		}
	})
</script>

Visualización del Tiempo de Desmontaje

Initial Run:
┌──────────────────────────────────┐
│  Effect body runs                │
│  → setInterval(fn, 1000)         │
│  → Returns teardown function     │
└──────────────────────────────────┘

State Changes (interval becomes 500):
┌──────────────────────────────────┐
│  1. Teardown from previous run   │
│     → clearInterval(oldId)       │
├──────────────────────────────────┤
│  2. Effect body runs again       │
│     → setInterval(fn, 500)       │
│     → Returns new teardown       │
└──────────────────────────────────┘

Component Destroyed:
┌──────────────────────────────────┐
│  Teardown runs one final time    │
│  → clearInterval(currentId)      │
└──────────────────────────────────┘

Ejemplos de Limpieza en el Mundo Real

1: Conexión WebSocket

<script>
	let serverUrl = $state('wss://api.example.com')
	let messages = $state([])
	let status = $state('disconnected')

	$effect(() => {
		status = 'connecting'
		const socket = new WebSocket(serverUrl)

		socket.onopen = () => {
			status = 'connected'
		}

		socket.onmessage = (event) => {
			messages = [...messages, JSON.parse(event.data)]
		}

		socket.onerror = () => {
			status = 'error'
		}

		socket.onclose = () => {
			status = 'disconnected'
		}

		// CRITICAL: Clean up the connection
		return () => {
			if (socket.readyState === WebSocket.OPEN) {
				socket.close()
			}
		}
	})
</script>

<p>Status: {status}</p>
<input bind:value={serverUrl} />

Cuando serverUrl cambia, el WebSocket anterior se cierra correctamente antes de abrir uno nuevo.

2: Bucle de Animation Frame

<script>
	let isAnimating = $state(true)
	let rotation = $state(0)

	$effect(() => {
		if (!isAnimating) return

		let animationId

		function animate() {
			rotation = (rotation + 1) % 360
			animationId = requestAnimationFrame(animate)
		}

		animationId = requestAnimationFrame(animate)

		return () => {
			// Stop the animation loop
			cancelAnimationFrame(animationId)
		}
	})
</script>

<div style="transform: rotate({rotation}deg)">🌀</div>
<button onclick={() => (isAnimating = !isAnimating)}>
	{isAnimating ? 'Stop' : 'Start'}
</button>

3: ResizeObserver

<script>
	let container
	let dimensions = $state({ width: 0, height: 0 })

	$effect(() => {
		if (!container) return

		const observer = new ResizeObserver((entries) => {
			const entry = entries[0]
			dimensions = {
				width: entry.contentRect.width,
				height: entry.contentRect.height
			}
		})

		observer.observe(container)

		return () => {
			observer.disconnect()
		}
	})
</script>

<div bind:this={container} style="resize: both; overflow: auto; border: 1px solid gray;">
	<p>Width: {dimensions.width}px</p>
	<p>Height: {dimensions.height}px</p>
</div>

Limpieza Condicional

A veces solo necesitas limpiar si se cumplió cierta condición:

<script>
	let useWebSocket = $state(false)
	let socket = null

	$effect(() => {
		if (useWebSocket) {
			socket = new WebSocket('wss://api.example.com')

			return () => {
				socket.close()
				socket = null
			}
		}
		// If useWebSocket is false, no cleanup needed
		// because nothing was set up
	})
</script>

Cómo Evitar Bucles Infinitos

El problema más común con los efectos es el bucle infinito. Ocurre cuando un efecto lee y escribe en el mismo estado, creando un ciclo: el cambio dispara el efecto, el efecto provoca un cambio, el cambio dispara el efecto...

El Problema

<script>
	let count = $state(0)

	// AVOID: INFINITE LOOP!
	$effect(() => {
		count = count + 1 // Reads count, then writes to count
		// This triggers the effect again... forever
	})
</script>

Por Qué Sucede

El efecto se ejecuta, lee count (valor: 0)
El efecto escribe en count (ahora: 1)
Svelte detecta que count cambió
El efecto es programado para volver a ejecutarse
El efecto se ejecuta, lee count (valor: 1)
El efecto escribe en count (ahora: 2)
→ Bucle infinito

La Regla de Oro

Si estás escribiendo en un $state dentro de un efecto, y ese efecto también lee desde ese estado, probablemente lo estás haciendo de forma incorrecta.

Soluciones

1: Usar `$derived` en Su Lugar

La mayoría de los escenarios de "calcular algo a partir del estado" deberían usar $derived, no $effect:

<script>
	let items = $state([1, 2, 3, 4, 5])

	// AVOID: Using effect to compute
	let total = $state(0)
	$effect(() => {
		total = items.reduce((sum, n) => sum + n, 0) // Infinite loop potential!
	})

	// PREFERRED: Using derived
	let total = $derived(items.reduce((sum, n) => sum + n, 0))
</script>

2: Usa `untrack` para Leer Sin Crear Dependencia

Si necesitas leer un valor sin convertirlo en una dependencia:

<script>
	import { untrack } from 'svelte'

	let history = $state([])
	let currentValue = $state(0)

	$effect(() => {
		// Read currentValue as a dependency (triggers on change)
		const value = currentValue

		// Read history without making it a dependency
		const previousHistory = untrack(() => history)

		// Now we can safely write to history
		history = [...previousHistory, value]
	})
</script>

3: Usa Condiciones de Guarda

Verifica si realmente se necesita una actualización antes de escribir:

<script>
	let searchTerm = $state('')
	let normalizedTerm = $state('')

	$effect(() => {
		const normalized = searchTerm.trim().toLowerCase()

		// Only update if the value actually changed
		if (normalized !== normalizedTerm) {
			normalizedTerm = normalized
		}
	})
</script>

Pero, siendo honestos, este ejemplo debería usar simplemente $derived:

<script>
	let searchTerm = $state('')
	let normalizedTerm = $derived(searchTerm.trim().toLowerCase())
</script>

4: Separa los Estados de Lectura y Escritura

Si realmente necesitas un efecto que modifique estado, asegúrate de que el estado que lees sea diferente del estado que escribes:

<script>
	let inputValue = $state('') // This is what we READ
	let processedValue = $state('') // This is what we WRITE

	$effect(() => {
		// Read from inputValue
		// Write to processedValue (different state)
		processedValue = inputValue.toUpperCase()
	})
</script>

<input bind:value={inputValue} /><p>Processed: {processedValue}</p>

Nuevamente, esto es mejor como un $derived:

<script>
	let inputValue = $state('')
	let processedValue = $derived(inputValue.toUpperCase())
</script>

Detectar Bucles Infinitos

Svelte tiene protección incorporada. Si detecta que un efecto se ejecuta demasiadas veces en rápida sucesión, se detendrá y lanzará un error:

Detected effect cycle

Durante el desarrollo, verás esto en tu consola junto con un stack trace que apunta al efecto problemático.

`$effect` vs `$effect.pre`: El Momento de Ejecución Importa

Svelte proporciona dos runes de efecto que difieren en cuándo se ejecutan en relación con las actualizaciones del DOM.

`$effect`: Después de las Actualizaciones del DOM

El $effect regular se ejecuta después de que Svelte ha aplicado los cambios al DOM. Esto es lo que necesitas el 90% del tiempo:

<script>
	let items = $state(['a', 'b', 'c'])
	let list

	$effect(() => {
		// The DOM is already updated here
		console.log(`List has ${list.children.length} children`)
		// If we just added an item, the new <li> is already there
	})
</script>

<ul bind:this={list}>
	{#each items as item}
		<li>{item}</li>
	{/each}
</ul>

Usa $effect cuando necesites:

Leer del DOM después de que se haya actualizado
Medir tamaños de elementos después de cambios de contenido
Aplicar operaciones post-renderizado
Sincronizar con bibliotecas externas que trabajan con el DOM renderizado

`$effect.pre`: Antes de las Actualizaciones del DOM

$effect.pre se ejecuta antes de que Svelte aplique los cambios al DOM. Esta es una herramienta más especializada para casos de uso específicos:

<script>
	import { tick } from 'svelte'

	let messages = $state([])
	let viewport

	$effect.pre(() => {
		if (!viewport) return

		// Reference messages to make this a dependency
		messages.length

		// Check if we're scrolled to the bottom BEFORE new messages render
		const isAtBottom = viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 20

		if (isAtBottom) {
			// Wait for DOM to update, then scroll
			tick().then(() => {
				viewport.scrollTo(0, viewport.scrollHeight)
			})
		}
	})
</script>

<div bind:this={viewport} class="chat-viewport">
	{#each messages as message}
		<p>{message}</p>
	{/each}
</div>

Por qué se necesita $effect.pre aquí:

Necesitamos verificar si el usuario está desplazado hasta el final antes de que se agregue el nuevo mensaje
Si usáramos $effect regular, el nuevo mensaje ya estaría en el DOM
El cálculo de la posición de desplazamiento estaría desajustado porque cambió la altura de desplazamiento

Comparación Lado a Lado

<script>
	let count = $state(0)
	let paragraph

	$effect.pre(() => {
		console.log('[PRE] Before DOM update')
		console.log('[PRE] Paragraph text:', paragraph?.textContent)
	})

	$effect(() => {
		console.log('[EFFECT] After DOM update')
		console.log('[EFFECT] Paragraph text:', paragraph?.textContent)
	})
</script>

<p bind:this={paragraph}>Count: {count}</p>
<button onclick={() => count++}>Increment</button>

Haz clic en el botón cuando count sea 0:

[PRE] Before DOM update
[PRE] Paragraph text: Count: 0      ← Still shows old value!
[EFFECT] After DOM update
[EFFECT] Paragraph text: Count: 1   ← Shows new value

Cuándo Usar Cada Uno

Escenario	Usar
Medir el DOM después de actualizaciones	`$effect`
Dibujo en canvas	`$effect`
Integración con bibliotecas de terceros	`$effect`
Analíticas/registro	`$effect`
Preservación de posición de desplazamiento	`$effect.pre`
Cálculos pre-renderizado	`$effect.pre`
Comparar DOM antiguo vs nuevo	`$effect.pre`

Ejemplo Práctico: Chat con Auto-Desplazamiento

Aquí hay un ejemplo completo que muestra por qué $effect.pre es esencial para una interfaz de chat:

<script>
	import { tick } from 'svelte'

	let messages = $state([
		{ id: 1, text: 'Hello!' },
		{ id: 2, text: 'How are you?' }
	])
	let newMessage = $state('')
	let chatContainer
	let shouldAutoScroll = $state(true)

	// Check scroll position BEFORE new content is added
	$effect.pre(() => {
		if (!chatContainer) return

		// Track messages to run when they change
		messages.length

		// Check if user is at the bottom (within 50px)
		const { scrollTop, scrollHeight, clientHeight } = chatContainer
		shouldAutoScroll = scrollHeight - scrollTop - clientHeight < 50
	})

	// Scroll AFTER new content is rendered
	$effect(() => {
		if (!chatContainer || !shouldAutoScroll) return

		// Track messages
		messages.length

		// Scroll to bottom
		chatContainer.scrollTop = chatContainer.scrollHeight
	})

	function sendMessage() {
		if (!newMessage.trim()) return

		messages = [
			...messages,
			{
				id: Date.now(),
				text: newMessage
			}
		]
		newMessage = ''
	}
</script>

<div bind:this={chatContainer} class="chat-container">
	{#each messages as msg (msg.id)}
		<div class="message">{msg.text}</div>
	{/each}
</div>

<form
	onsubmit={(e) => {
		e.preventDefault()
		sendMessage()
	}}
>
	<input bind:value={newMessage} placeholder="Type a message..." />
	<button type="submit">Send</button>
</form>

<style>
	.chat-container {
		height: 300px;
		overflow-y: auto;
		border: 1px solid #ccc;
		padding: 1rem;
	}
	.message {
		padding: 0.5rem;
		margin: 0.25rem 0;
		background: #f0f0f0;
		border-radius: 4px;
	}
</style>

Runes de Efecto Avanzadas

Más allá de $effect y $effect.pre, Svelte 5 proporciona herramientas adicionales para escenarios específicos.

`$effect.tracking()`

Esta rune te indica si el código se está ejecutando dentro de un contexto de seguimiento (un efecto o plantilla). Es útil para construir abstracciones avanzadas:

<script>
	console.log('In component setup:', $effect.tracking()) // false

	$effect(() => {
		console.log('In effect:', $effect.tracking()) // true
	})
</script>

<p>In template: {$effect.tracking()}</p> <!-- true -->

Caso de Uso Práctico: Suscripciones Condicionales

<script>
	import { createSubscriber } from 'svelte/reactivity'

	function createMousePosition() {
		let x = $state(0)
		let y = $state(0)

		const subscribe = createSubscriber((update) => {
			function handleMove(e) {
				x = e.clientX
				y = e.clientY
				update()
			}

			window.addEventListener('mousemove', handleMove)

			return () => {
				window.removeEventListener('mousemove', handleMove)
			}
		})

		return {
			get x() {
				subscribe() // Only subscribe if in a tracking context
				return x
			},
			get y() {
				subscribe()
				return y
			}
		}
	}

	const mouse = createMousePosition()
</script>

<!-- Reading mouse.x in the template subscribes to updates --><p>Mouse: {mouse.x}, {mouse.y}</p>

`$effect.root()`

Esto crea un ámbito no rastreado que no se limpia automáticamente. Es para casos de uso avanzados donde necesitas control manual:

<script>
	let count = $state(0)

	// Create a root effect that we control manually
	const cleanup = $effect.root(() => {
		$effect(() => {
			console.log(`Count is: ${count}`)
		})

		// Optional: return cleanup logic
		return () => {
			console.log('Root effect cleaned up')
		}
	})

	// Later, we can manually destroy it
	function stopWatching() {
		cleanup()
	}
</script>

<p>{count}</p>
<button onclick={() => count++}>Increment</button>
<button onclick={stopWatching}>Stop Watching</button>

Cuándo usar $effect.root:

Crear efectos fuera de la inicialización de componentes
Construir utilidades reutilizables basadas en efectos
Control manual del ciclo de vida
Escenarios de pruebas

Cuándo NO Usar `$effect`

Esta sección es fundamental. Muchos desarrolladores nuevos en Svelte 5 abusan de los efectos porque están familiarizados con ellos desde otros frameworks. Pero el $derived de Svelte suele ser la mejor opción.

Pregúntate: "¿Estoy calculando un valor a partir de otros valores?"

Si la respuesta es sí → usa $derived, Si no (estás sincronizando con algo externo) → usa $effect

Anti-Patrón: Sincronizar Estado con Estado

<script>
	let count = $state(0)
	let doubled = $state()

	// AVOID: This creates unnecessary state and effect
	$effect(() => {
		doubled = count * 2
	})
</script>

Por qué es malo:

Estado adicional que gestionar
doubled está brevemente como undefined antes de que se ejecute el efecto
Más código, más complejidad
Svelte tiene una solución incorporada

Haz esto en su lugar:

<script>
	let count = $state(0)
	let doubled = $derived(count * 2)
</script>

Anti-Patrón: El Problema de Sincronizar Dos Entradas

Un error clásico es intentar mantener dos entradas sincronizadas:

<script>
	const total = 100
	let spent = $state(0)
	let remaining = $state(total)

	// AVOID: This creates TWO effects that trigger each other!
	$effect(() => {
		remaining = total - spent
	})

	$effect(() => {
		spent = total - remaining
	})
</script>

<label>
	Spent: <input type="number" bind:value={spent} max={total} />
</label>
<label>
	Remaining: <input type="number" bind:value={remaining} max={total} />
</label>

Por qué es problemático:

Dependencia circular entre efectos
Difícil razonar sobre cuál se ejecuta primero
Puede causar comportamiento inesperado

Solución 1: Derived + Callback

<script>
	const total = 100
	let spent = $state(0)
	let remaining = $derived(total - spent)

	function updateFromRemaining(newRemaining) {
		spent = total - newRemaining
	}
</script>

<label>
	Spent: <input type="number" bind:value={spent} max={total} />
</label>
<label>
	Remaining:
	<input
		type="number"
		value={remaining}
		oninput={(e) => updateFromRemaining(+e.target.value)}
		max={total}
	/>
</label>

Solución 2: Function Bindings (Svelte 5.7+)

<script>
	const total = 100
	let spent = $state(0)
	let remaining = $derived(total - spent)
</script>

<label>
	Spent: <input type="number" bind:value={spent} max={total} />
</label>
<label>
	Remaining:
	<input type="number" bind:value={() => remaining, (v) => (spent = total - v)} max={total} />
</label>

Buenos casos de uso para `$effect`

1: Dibujo en Canvas

<script>
	let canvas
	let hue = $state(0)

	$effect(() => {
		const ctx = canvas.getContext('2d')
		ctx.fillStyle = `hsl(${hue}, 70%, 50%)`
		ctx.fillRect(0, 0, canvas.width, canvas.height)
	})
</script>

<canvas bind:this={canvas} width="200" height="200"></canvas>
<input type="range" bind:value={hue} min="0" max="360" />

2: Título del documento

<script>
	let unreadCount = $state(5)

	$effect(() => {
		document.title = unreadCount > 0 ? `(${unreadCount}) My App` : 'My App'
	})
</script>

3. Sincronización con LocalStorage

<script>
	let theme = $state('light')

	// Load from localStorage on mount
	$effect(() => {
		const saved = localStorage.getItem('theme')
		if (saved) theme = saved
	})

	// Save to localStorage on change
	$effect(() => {
		localStorage.setItem('theme', theme)
	})
</script>

4. Integración con bibliotecas de terceros

<script>
	import Chart from 'chart.js/auto'

	let data = $state([10, 20, 30, 40])
	let canvas
	let chart

	$effect(() => {
		if (chart) {
			// Update existing chart
			chart.data.datasets[0].data = data
			chart.update()
		} else {
			// Create new chart
			chart = new Chart(canvas, {
				type: 'bar',
				data: {
					labels: ['A', 'B', 'C', 'D'],
					datasets: [{ data }]
				}
			})
		}

		return () => {
			chart?.destroy()
			chart = null
		}
	})
</script>

<canvas bind:this={canvas}></canvas>

5: Event Listeners en elementos externos

<script>
	let isEnabled = $state(true)
	let keyPressed = $state('')

	$effect(() => {
		if (!isEnabled) return

		function handleKeyDown(e) {
			keyPressed = e.key
		}

		document.addEventListener('keydown', handleKeyDown)

		return () => {
			document.removeEventListener('keydown', handleKeyDown)
		}
	})
</script>

<p>Last key: {keyPressed}</p>
<button onclick={() => (isEnabled = !isEnabled)}>
	{isEnabled ? 'Disable' : 'Enable'} listener
</button>

Ejemplos prácticos

Construyamos algunos componentes del mundo real que demuestren los patrones de efectos correctamente.

1: Búsqueda con debounce

Un input de búsqueda que espera a que el usuario deje de escribir antes de realizar la búsqueda:

<script>
	let searchTerm = $state('')
	let debouncedTerm = $state('')
	let results = $state([])
	let isSearching = $state(false)

	// Debounce the search term
	$effect(() => {
		const term = searchTerm // Read the reactive value

		const timeoutId = setTimeout(() => {
			debouncedTerm = term
		}, 300)

		return () => clearTimeout(timeoutId)
	})

	// Perform the search when debounced term changes
	$effect(() => {
		const term = debouncedTerm

		if (!term) {
			results = []
			return
		}

		isSearching = true

		// Simulate API call
		const controller = new AbortController()

		fetch(`/api/search?q=${encodeURIComponent(term)}`, {
			signal: controller.signal
		})
			.then((r) => r.json())
			.then((data) => {
				results = data
				isSearching = false
			})
			.catch((err) => {
				if (err.name !== 'AbortError') {
					console.error(err)
					isSearching = false
				}
			})

		return () => controller.abort()
	})
</script>

<input bind:value={searchTerm} placeholder="Search..." />

{#if isSearching}
	<p>Searching...</p>
{:else if results.length > 0}
	<ul>
		{#each results as result}
			<li>{result.title}</li>
		{/each}
	</ul>
{:else if debouncedTerm}
	<p>No results found</p>
{/if}

2: Intersection Observer

Rastrea cuándo los elementos entran y salen del viewport:

<script>
	let items = $state(
		Array.from({ length: 20 }, (_, i) => ({
			id: i,
			visible: false
		}))
	)

	function createVisibilityObserver(element, index) {
		const observer = new IntersectionObserver(
			(entries) => {
				entries.forEach((entry) => {
					items[index].visible = entry.isIntersecting
				})
			},
			{ threshold: 0.5 }
		)

		observer.observe(element)

		return () => observer.disconnect()
	}
</script>

<div class="scroll-container">
	{#each items as item, index (item.id)}
		{@const visible = item.visible}
		<div class="item" class:visible use:action={(node) => createVisibilityObserver(node, index)}>
			Item {item.id}
			{visible ? '👁️' : ''}
		</div>
	{/each}
</div>

<style>
	.scroll-container {
		height: 400px;
		overflow-y: auto;
	}
	.item {
		height: 100px;
		margin: 10px;
		padding: 20px;
		background: #f0f0f0;
		transition: background 0.3s;
	}
	.item.visible {
		background: #d0ffd0;
	}
</style>

3: Media Query Listener

Reacciona a los breakpoints responsivos:

<script>
	let breakpoint = $state('desktop')

	$effect(() => {
		const queries = {
			mobile: window.matchMedia('(max-width: 639px)'),
			tablet: window.matchMedia('(min-width: 640px) and (max-width: 1023px)'),
			desktop: window.matchMedia('(min-width: 1024px)')
		}

		function updateBreakpoint() {
			if (queries.mobile.matches) breakpoint = 'mobile'
			else if (queries.tablet.matches) breakpoint = 'tablet'
			else breakpoint = 'desktop'
		}

		// Initial check
		updateBreakpoint()

		// Listen for changes
		Object.values(queries).forEach((mq) => {
			mq.addEventListener('change', updateBreakpoint)
		})

		return () => {
			Object.values(queries).forEach((mq) => {
				mq.removeEventListener('change', updateBreakpoint)
			})
		}
	})
</script>

<p>Current breakpoint: <strong>{breakpoint}</strong></p>

{#if breakpoint === 'mobile'}
	<MobileNav />
{:else}
	<DesktopNav />
{/if}

4: Historial de deshacer/rehacer

Rastrea los cambios de estado y permite deshacer/rehacer:

<script>
	let text = $state('')
	let history = $state([''])
	let historyIndex = $state(0)
	let isUndoRedo = false

	// Track text changes for undo/redo
	$effect(() => {
		const currentText = text

		// Don't record if this change came from undo/redo
		if (isUndoRedo) {
			isUndoRedo = false
			return
		}

		// Don't record if text hasn't changed
		if (currentText === history[historyIndex]) return

		// Truncate any "future" history and add new entry
		history = [...history.slice(0, historyIndex + 1), currentText]
		historyIndex = history.length - 1
	})

	function undo() {
		if (historyIndex > 0) {
			isUndoRedo = true
			historyIndex--
			text = history[historyIndex]
		}
	}

	function redo() {
		if (historyIndex < history.length - 1) {
			isUndoRedo = true
			historyIndex++
			text = history[historyIndex]
		}
	}

	let canUndo = $derived(historyIndex > 0)
	let canRedo = $derived(historyIndex < history.length - 1)
</script>

<textarea bind:value={text} rows="5" cols="40"></textarea>

<div class="controls">
	<button onclick={undo} disabled={!canUndo}> ↩ Undo </button>
	<button onclick={redo} disabled={!canRedo}> ↪ Redo </button>
	<span>
		Step {historyIndex + 1} of {history.length}
	</span>
</div>

5: Reloj en tiempo real con zona horaria

<script>
	let timezone = $state('local')
	let time = $state(new Date())

	$effect(() => {
		// Update every second
		const intervalId = setInterval(() => {
			time = new Date()
		}, 1000)

		return () => clearInterval(intervalId)
	})

	let formattedTime = $derived.by(() => {
		const options = {
			hour: '2-digit',
			minute: '2-digit',
			second: '2-digit',
			hour12: true
		}

		if (timezone !== 'local') {
			options.timeZone = timezone
		}

		return time.toLocaleTimeString('en-US', options)
	})

	const timezones = [
		{ value: 'local', label: 'Local Time' },
		{ value: 'America/New_York', label: 'New York' },
		{ value: 'Europe/London', label: 'London' },
		{ value: 'Asia/Tokyo', label: 'Tokyo' },
		{ value: 'Australia/Sydney', label: 'Sydney' }
	]
</script>

<select bind:value={timezone}>
	{#each timezones as tz}
		<option value={tz.value}>{tz.label}</option>
	{/each}
</select>

<p class="time">{formattedTime}</p>

<style>
	.time {
		font-size: 3rem;
		font-family: monospace;
	}
</style>

Errores comunes y cómo corregirlos

1: El efecto se ejecuta antes de que el DOM esté listo

El problema:

<script>
	let element

	$effect(() => {
		// element might be undefined here!
		element.focus()
	})
</script>

<input bind:this={element} />

La solución: Proteger contra valores undefined

<script>
	let element

	$effect(() => {
		if (!element) return // Guard clause
		element.focus()
	})
</script>

2: Lectura de valores asíncronos

El problema:

<script>
  let userId = $state(1);
  let userName = $state('');

  $effect(() => {
    // AVOID: After the await, Svelte stops tracking
    const response = await fetch(`/api/users/${userId}`);
    const user = await response.json();
    userName = user.name;  // userId is tracked, but...
  });
</script>

La solución: Leer de forma síncrona, luego hacer fetch

<script>
	let userId = $state(1)
	let userName = $state('')

	$effect(() => {
		// PREFERRED: Read userId synchronously (it becomes a dependency)
		const id = userId

		// Then do async work
		fetch(`/api/users/${id}`)
			.then((r) => r.json())
			.then((user) => {
				userName = user.name
			})
	})
</script>

3: Múltiples efectos cuando uno sería suficiente

El problema:

<script>
	let x = $state(0)
	let y = $state(0)

	// AVOID: Two separate effects for related work
	$effect(() => {
		console.log('X changed:', x)
	})

	$effect(() => {
		console.log('Y changed:', y)
	})
</script>

La solución: Combinar cuando sea apropiado

<script>
	let x = $state(0)
	let y = $state(0)

	// PREFERRED: One effect that tracks both
	$effect(() => {
		console.log('Coordinates changed:', x, y)
	})
</script>

4: No limpiar las suscripciones

El problema:

<script>
	let topic = $state('news')

	$effect(() => {
		// AVOID: Never cleaned up! When topic changes, old subscription remains
		socket.subscribe(topic, handleMessage)
	})
</script>

La solución: Retornar una función de limpieza

<script>
	let topic = $state('news')

	$effect(() => {
		socket.subscribe(topic, handleMessage)

		// PREFERRED: Clean up before re-subscribing
		return () => {
			socket.unsubscribe(topic, handleMessage)
		}
	})
</script>

5: Effect dentro de un bucle

El problema:

<script>
	let items = $state([{ id: 1 }, { id: 2 }])

	// AVOID: This runs once when items changes, NOT per item
	$effect(() => {
		items.forEach((item) => {
			console.log('Processing:', item.id)
		})
	})
</script>

La solución: Usar un componente por elemento o rastrear propiedades específicas

<!-- PREFERRED: Each item gets its own component with its own effects -->
{#each items as item (item.id)}
	<ItemComponent data={item} />
{/each}

`onMount` vs `$effect` para código de inicialización

onMount sigue siendo completamente compatible en Svelte 5 y frecuentemente es la opción más clara para inicializaciones únicas que no dependen de estado reactivo.

Usa onMount cuando:

La inicialización se ejecuta una sola vez y no depende de valores reactivos
Quieres una semántica explícita de "ejecutar al montar"
El código es más fácil de entender como un evento de ciclo de vida

<script>
	import { onMount } from 'svelte'

	// PREFERRED: one-time setup, no dependencies
	onMount(() => {
		const interval = setInterval(doSomething, 1000)
		return () => clearInterval(interval)
	})
</script>

Usa $effect cuando:

La inicialización depende de estado reactivo y debe re-ejecutarse cuando cambia
Necesitas que el comportamiento reaccione a cambios de estado

<script>
	let intervalMs = $state(1000)

	// PREFERRED: re-runs when intervalMs changes
	$effect(() => {
		const interval = setInterval(doSomething, intervalMs)
		return () => clearInterval(interval)
	})
</script>

La diferencia clave: onMount se ejecuta exactamente una vez. $effect se ejecuta al montar y se re-ejecuta cuando cambian las dependencias. Elige según si necesitas reactividad, no según cuál "se siente más Svelte 5."

Referencia rápida

Tipos de effects

Runa	Cuándo se ejecuta	Caso de uso
`$effect`	Después de actualizaciones del DOM	Canvas, librerías externas, mediciones
`$effect.pre`	Antes de actualizaciones del DOM	Posición de scroll, cálculos pre-renderizado
`$effect.root`	Control manual	Effects fuera de componentes, pruebas

Patrón de limpieza

$effect(() => {
  // Setup code here
  const resource = createResource();

  // Return cleanup function
  return () => {
    resource.destroy();
  };
});

Rastreo de dependencias

import { untrack } from 'svelte';

$effect(() => {
  // This IS tracked (effect runs when `tracked` changes)
  const value = tracked;

  // This is NOT tracked
  const other = untrack(() => untracked);
});

Errores comunes a evitar

❌ No hagas	✅ Haz
Calcular valores derivados en effects	Usa `$derived`
Olvidar funciones de limpieza	Siempre limpia timers, listeners y suscripciones
Escribir al estado que estás leyendo	Usa `untrack` o estados separados
Usar effects para sincronización de estado	Usa `$derived` o callbacks
Ignorar el consejo de "los effects son escotillas de escape"	Prefiere soluciones declarativas

Árbol de decisión

Need to compute something from state?
├── Yes → Use $derived
└── No → Need to sync with external system?
    ├── Yes → Use $effect
    │   ├── Need to run before DOM? → Use $effect.pre
    │   └── Need cleanup? → Return a function
    └── No → You probably don't need an effect

Conclusiones clave

Los effects son para sincronización externa, no para calcular valores. Usa $derived para cómputos.
Las dependencias se rastrean automáticamente al leer valores reactivos de forma síncrona.
Siempre provee limpieza cuando configures timers, listeners o suscripciones.
Evita los bucles infinitos no escribiendo al estado que estás leyendo (o usa untrack).
Usa $effect.pre solo cuando necesites leer el estado del DOM antes de las actualizaciones.
Los effects se ejecutan después del montaje y después de las actualizaciones del DOM — puedes acceder a los elementos de forma segura.
Los effects no se ejecutan en el servidor — las APIs exclusivas del navegador son seguras de usar.
Prefiere onMount para inicializaciones únicas sin dependencias reactivas; usa $effect cuando la inicialización necesite reaccionar a cambios de estado.

Domina estos patrones y construirás aplicaciones Svelte 5 que son limpias, eficientes y libres de los bugs sutiles que plagan las bases de código con uso intensivo de effects.

Ciclo de vida y patrones de limpieza en Svelte 5

Qué son los efectos

¿Por qué es esto importante?

¿Qué es un efecto y por qué lo necesitamos?

El concepto: conectando dos mundos

La definición

Los efectos son una "salida de emergencia"

Cuándo se ejecutan los efectos: el ciclo de vida

La ejecución inicial: después del montaje

Las re-ejecuciones: en una microtarea

Después de las actualizaciones del DOM

Renderizado del lado del servidor: los efectos no se ejecutan

Línea de tiempo visual

Entendiendo las dependencias

Qué se rastrea

La regla básica

El rastreo ocurre en tiempo de ejecución

El requisito de sincronía

Rastreo de objetos vs. propiedades

Rastreo a Través de Llamadas a Funciones

Salirse del Rastreo: La Función untrack

Patrones de Limpieza

La Función de Desmontaje

El Patrón Básico

Por Qué Importa el Desmontaje

Prevención de Fugas de Memoria

Visualización del Tiempo de Desmontaje

Ejemplos de Limpieza en el Mundo Real

1: Conexión WebSocket

2: Bucle de Animation Frame

3: ResizeObserver

Limpieza Condicional

Cómo Evitar Bucles Infinitos

El Problema

Por Qué Sucede

La Regla de Oro

Soluciones

1: Usar $derived en Su Lugar

2: Usa untrack para Leer Sin Crear Dependencia

3: Usa Condiciones de Guarda

4: Separa los Estados de Lectura y Escritura

Detectar Bucles Infinitos

$effect vs $effect.pre: El Momento de Ejecución Importa

$effect: Después de las Actualizaciones del DOM

$effect.pre: Antes de las Actualizaciones del DOM

Comparación Lado a Lado

Cuándo Usar Cada Uno

Ejemplo Práctico: Chat con Auto-Desplazamiento

Runes de Efecto Avanzadas

$effect.tracking()

$effect.root()

Cuándo NO Usar $effect

Anti-Patrón: Sincronizar Estado con Estado

Anti-Patrón: El Problema de Sincronizar Dos Entradas

Solución 1: Derived + Callback

Solución 2: Function Bindings (Svelte 5.7+)

Buenos casos de uso para $effect

Ejemplos prácticos

1: Búsqueda con debounce

2: Intersection Observer

3: Media Query Listener

4: Historial de deshacer/rehacer

5: Reloj en tiempo real con zona horaria

Errores comunes y cómo corregirlos

1: El efecto se ejecuta antes de que el DOM esté listo

2: Lectura de valores asíncronos

3: Múltiples efectos cuando uno sería suficiente

4: No limpiar las suscripciones

5: Effect dentro de un bucle

onMount vs $effect para código de inicialización

Referencia rápida

Tipos de effects

Patrón de limpieza

Rastreo de dependencias

Errores comunes a evitar

Árbol de decisión

Conclusiones clave

Ver también

Documentación oficial

Recursos externos

Salirse del Rastreo: La Función `untrack`

1: Usar `$derived` en Su Lugar

2: Usa `untrack` para Leer Sin Crear Dependencia

`$effect` vs `$effect.pre`: El Momento de Ejecución Importa

`$effect`: Después de las Actualizaciones del DOM

`$effect.pre`: Antes de las Actualizaciones del DOM

`$effect.tracking()`

`$effect.root()`

Cuándo NO Usar `$effect`

Buenos casos de uso para `$effect`

`onMount` vs `$effect` para código de inicialización