Introducción a la Reactividad de Svelte 5

Svelte 5 introdujo un enfoque revolucionario para la reactividad con las runas. Esta guía proporciona una visión general de cómo funciona la reactividad en Svelte 5 y te presenta las runas que lo hacen posible. Para tutoriales detallados sobre cada runa, sigue los enlaces a lo largo de este artículo.

Prueba Svelte 5 en el REPL

Lo Que Deberías Saber

Antes de comenzar, asegúrate de estar familiarizado con estos conceptos de JavaScript:

Variables: let, const y cómo se diferencian
Objetos y Arreglos: Crearlos, acceder a ellos y modificarlos
Funciones: Cómo definir y llamar funciones
Funciones Flecha: La sintaxis () => {}
Conceptos básicos del DOM: Qué sucede cuando una página web se actualiza

Si no estás seguro de alguno de estos, ¡no hay problema! Los tutoriales individuales de runas explican las cosas a medida que avanzan, pero tener esta base te ayudará.

Por Qué Importa la Reactividad

El Problema: Mantener la UI Sincronizada con los Datos

Imagina que estás construyendo un contador simple. En JavaScript puro, escribirías algo como esto:

<button id="btn">Clicks: 0</button>

<script>
	let count = 0
	const button = document.getElementById('btn')

	button.addEventListener('click', () => {
		count++
		button.textContent = `Clicks: ${count}` // Manual update!
	})
</script>

¿Notas el problema? Cada vez que count cambia, tienes que actualizar manualmente el texto del botón. En un ejemplo simple, eso está bien. Pero imagina una aplicación compleja con docenas de variables que afectan a cientos de elementos de la UI. ¡Pasarías más tiempo escribiendo código de actualización que funcionalidades reales!

La Solución: Programación Reactiva

La reactividad significa que la UI se actualiza automáticamente cuando cambian tus datos. Solo cambias los datos y el framework se encarga del resto.

Piénsalo como una hoja de cálculo: Cuando cambias la celda A1, cualquier fórmula que haga referencia a A1 se recalcula automáticamente. No actualizas cada celda manualmente—Excel lo hace por ti.

Svelte funciona de la misma manera. Cambias una variable y cualquier parte de la UI que use esa variable se actualiza automáticamente:

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

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

Sin actualizaciones manuales del DOM. Sin listeners de eventos que gestionar. Solo cambia los datos y Svelte se encarga del resto.

La reactividad de Svelte es "de grano fino", lo que significa que solo se cambian las partes del DOM que necesitan actualizarse. Hacer clic en el botón de arriba solo actualiza el nodo de texto—el elemento botón en sí no se vuelve a renderizar.

¿Qué Son las Runas?

En Svelte 5, las runas son símbolos especiales (que comienzan con $) que le indican a Svelte cómo manejar la reactividad. La palabra "runa" proviene de símbolos antiguos con propiedades mágicas—¡apropiado, ya que agregan "magia" a tus variables!

Visual: Cómo las Runas Transforman Tu Código

You write:                    Svelte compiles to:
───────────────────────────────────────────────────
let count = $state(0)    →    let count = signal(0)

let doubled = $derived(  →    let doubled = computed(
  count * 2                     () => count * 2
)                             )

$effect(() => {          →    effect(() => {
  console.log(count)            console.log(count)
})                            })

Las runas son directivas del compilador—le indican al compilador de Svelte cómo transformar tu código en JavaScript reactivo y eficiente.

Referencia Completa de Runas

Aquí están todas las runas principales y lo que hacen:

Runa	Propósito	Ejemplo de Uso	Más Información
`$state`	Crea estado reactivo (datos que disparan actualizaciones de UI)	Entrada de usuario, contadores, toggles	Tutorial
`$state.raw`	Crea estado reactivo superficial (para rendimiento)	Arreglos grandes de APIs	Tutorial
`$state.snapshot`	Obtiene una copia plana y no reactiva del estado	Logging, solicitudes a APIs	Tutorial
`$derived`	Crea valores computados a partir de una sola expresión	Totales, cadenas formateadas	Tutorial
`$derived.by`	Crea valores computados con lógica compleja (múltiples sentencias)	Cálculos complejos, filtrado	Tutorial
`$effect`	Ejecuta efectos secundarios cuando cambian las dependencias	Analytics, localStorage	Tutorial
`$effect.pre`	Se ejecuta antes de las actualizaciones del DOM	Guardar posición de scroll	Tutorial
`$props`	Declara las props de un componente	Entradas del componente	Tutorial
`$bindable`	Hace que una prop sea enlazable en dos direcciones	Entradas de formulario, controles personalizados	Tutorial
`$inspect`	Herramienta de depuración para registrar cambios en valores reactivos	Depuración en desarrollo	Tutorial
`$host`	Accede al host de un elemento personalizado	Web components	Tutorial

Visión General Rápida de Cada Runa

`$state` — Estado Reactivo

La base de la reactividad en Svelte 5. Usa $state para crear variables que disparen actualizaciones de UI cuando cambien:

<script>
	let count = $state(0)
	let user = $state({ name: 'Alice', age: 30 })
	let items = $state(['apple', 'banana'])
</script>

<button onclick={() => count++}>Count: {count}</button><p>Name: {user.name}</p>

Los objetos y arreglos son profundamente reactivos—los cambios en propiedades anidadas disparan actualizaciones automáticamente. Para conjuntos de datos grandes que reemplazas por completo, usa $state.raw para mejor rendimiento.

Usa $state.raw para arreglos con más de 1000 elementos que reemplazas por completo (como respuestas de APIs). Es entre 3 y 5 veces más rápido que el proxy profundo.

`$derived` — Valores Computados

Crea valores que se recalculan automáticamente cuando cambian sus dependencias:

<script>
	let price = $state(100)
	let quantity = $state(2)
	let total = $derived(price * quantity)
</script>

<p>Total: ${total}</p>

Para cómputos complejos con múltiples sentencias, usa $derived.by:

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

	let stats = $derived.by(() => {
		const sum = items.reduce((a, b) => a + b, 0)
		const avg = sum / items.length
		return { sum, avg }
	})
</script>

<p>Sum: {stats.sum}, Average: {stats.avg}</p>

Los valores derivados se memorizan automáticamente—solo se recalculan cuando cambian las dependencias, lo que los hace perfectos para cómputos costosos.

`$effect` — Efectos Secundarios

Ejecuta código cuando cambian las dependencias reactivas. Perfecto para sincronizar con sistemas externos, logging o cualquier operación que no debería ser parte del renderizado:

<script>
	let count = $state(0)

	$effect(() => {
		console.log('Count changed to:', count)
		document.title = `Count: ${count}`
	})
</script>

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

¡La mayoría de las veces no necesitas $effect! Si estás computando un valor a partir de otros valores, usa $derived en su lugar. Solo usa $effect para efectos secundarios como llamadas a APIs, localStorage o integración con código que no es de Svelte.

`$props` — Props del Componente

Declara qué datos recibe un componente de su padre:

<script>
	let { name, age = 0 } = $props()
</script>

<p>{name} is {age} years old</p>

`$bindable` — Enlace Bidireccional

Hace que una prop sea capaz de enlace bidireccional, permitiendo que los componentes hijos actualicen el estado del padre:

<!-- TextInput.svelte -->
<script>
	let { value = $bindable() } = $props()
</script>

<input bind:value />

<!-- Parent.svelte -->
<script>
	import TextInput from './TextInput.svelte'
	let name = $state('')
</script>

<TextInput bind:value={name} /><p>You typed: {name}</p>

¿Dónde Puedes Usar las Runas?

Las runas funcionan en:

Ubicación	¿Funciona?	Notas
Archivos de componente `.svelte`	✅	Tanto en `<script>` como en la plantilla
Archivos `.svelte.js` / `.svelte.ts`	✅	Para estado reactivo compartido
Archivos regulares `.js` / `.ts`	❌	El compilador no los procesa

Esto se debe a que las runas son transformadas por el compilador de Svelte. Los archivos JavaScript regulares no son procesados por el compilador, por lo que las runas no funcionarán en ellos.

Svelte 4 vs Svelte 5: Guía de Migración

Si vienes de Svelte 4, así es como ha cambiado la sintaxis:

Gestión de Estado

Svelte 4	Svelte 5
`let count = 0`	`let count = $state(0)`
`$: double = count * 2`	`let double = $derived(count * 2)`
`$: { console.log(count) }`	`$effect(() => { console.log(count) })`
`$: if (count > 10) {...}`	`$effect(() => { if (count > 10) {...} })`

API de Componentes

Svelte 4	Svelte 5
`export let name`	`let { name } = $props()`
`export let value`	`let { value = $bindable() } = $props()`
`on:click={handler}`	`onclick={handler}`
`<slot />`	`{@render children()}`

Ciclo de Vida

Svelte 4	Svelte 5
`onMount(() => {...})`	`$effect(() => {...})`
`beforeUpdate(() => {...})`	`$effect.pre(() => {...})`
`afterUpdate(() => {...})`	`$effect(() => {...})`
`onDestroy(() => {...})`	`$effect(() => { return () => {...} })`

Guía de Migración Completa

Recomendaciones de Ruta de Aprendizaje

Para Principiantes Absolutos

Tutorial de $state - ¡Empieza aquí! Domina el estado reactivo
Tutorial de $derived - Aprende valores calculados
Tutorial de $props - Comunicación entre componentes
¡Construye un pequeño proyecto para practicar!

Para Desarrolladores de React/Vue

Reactividad de Grano Fino - ¡Estás aquí!
Tutorial de $state - Compara con useState/ref
Tutorial de $derived - Compara con useMemo/computed
Tutorial de $effect - Compara con useEffect/watchEffect

Para Desarrolladores de Svelte 4

Guía de Migración - Guía oficial
Tutorial de $state - Reemplaza las declaraciones reactivas
Tutorial de $effect - Reemplaza los hooks de ciclo de vida
Tutorial de $props - Nuevo sistema de props

Para Patrones Avanzados

Patrones Avanzados de Props - Rest props, genéricos
Tutorial de $host - Web components
Tutorial de $inspect - Depuración avanzada

Referencia Rápida y Patrones Comunes

1. Contador con Múltiples Operaciones

<script>
	let count = $state(0)
	let step = $state(1)
	let total = $derived(count * step)
</script>

<button onclick={() => (count += step)}>Add {step}</button>
<button onclick={() => (count -= step)}>Subtract {step}</button>
<button onclick={() => (count = 0)}>Reset</button>

<input type="number" bind:value={step} />

<p>Count: {count}</p>
<p>Total: {total}</p>

2. Formulario con Validación

<script>
	let email = $state('')
	let password = $state('')

	let isValidEmail = $derived(email.includes('@'))
	let isValidPassword = $derived(password.length >= 8)
	let canSubmit = $derived(isValidEmail && isValidPassword)
</script>

<input bind:value={email} type="email" />
{#if !isValidEmail && email}
	<span class="error">Invalid email</span>
{/if}

<input bind:value={password} type="password" />
{#if !isValidPassword && password}
	<span class="error">Password too short</span>
{/if}

<button disabled={!canSubmit}>Submit</button>

3. Obtención de Datos

<script>
	let userId = $state(1)
	let user = $state(null)
	let loading = $state(false)

	$effect(() => {
		// Capture userId synchronously so it becomes a tracked dependency
		const id = userId
		const controller = new AbortController()

		loading = true
		fetch(`/api/users/${id}`, { signal: controller.signal })
			.then((r) => r.json())
			.then((data) => {
				user = data
				loading = false
			})
			.catch((err) => {
				if (err.name !== 'AbortError') loading = false
			})

		// Cancel the previous request when userId changes before it resolves
		return () => controller.abort()
	})
</script>

<input type="number" bind:value={userId} />

{#if loading}
	<p>Loading...</p>
{:else if user}
	<p>{user.name}</p>
{/if}

4. Sincronización con Local Storage

<script>
	let theme = $state(localStorage.getItem('theme') ?? 'light')

	$effect(() => {
		localStorage.setItem('theme', theme)
		document.body.className = theme
	})
</script>

<button onclick={() => (theme = theme === 'light' ? 'dark' : 'light')}> Toggle Theme </button>

Árbol de Decisión: ¿Qué Runa Usar?

Need to store data that changes?
  ↓
  YES → Use $state

Need to compute a value from other values?
  ↓
  YES → Use $derived (or $derived.by for complex logic)

Need to sync with external system (API, localStorage, etc.)?
  ↓
  YES → Use $effect

Receiving data from parent component?
  ↓
  YES → Use $props

Need child to update parent's data?
  ↓
  YES → Use $bindable (or callback props)

Need to debug reactive values?
  ↓
  YES → Use $inspect

Conclusiones Clave

El sistema de runas de Svelte 5 proporciona una forma poderosa e intuitiva de construir aplicaciones reactivas:

$state para datos reactivos
$derived para valores calculados
$effect para efectos secundarios
$props para comunicación entre componentes
$bindable para enlace bidireccional

La sintaxis es limpia, cercana al JavaScript vanilla, y el compilador maneja toda la complejidad entre bastidores. Empieza con $state y $derived, y tendrás todo lo que necesitas para la mayoría de las aplicaciones.

Introducción a la Reactividad de Svelte 5

Lo Que Deberías Saber

Por Qué Importa la Reactividad

El Problema: Mantener la UI Sincronizada con los Datos

La Solución: Programación Reactiva

¿Qué Son las Runas?

Visual: Cómo las Runas Transforman Tu Código

Referencia Completa de Runas

Visión General Rápida de Cada Runa

`$state` — Estado Reactivo

`$derived` — Valores Computados

`$effect` — Efectos Secundarios

`$props` — Props del Componente

`$bindable` — Enlace Bidireccional

¿Dónde Puedes Usar las Runas?

Svelte 4 vs Svelte 5: Guía de Migración

Gestión de Estado

API de Componentes

Ciclo de Vida

Recomendaciones de Ruta de Aprendizaje

Para Principiantes Absolutos

Para Desarrolladores de React/Vue

Para Desarrolladores de Svelte 4

Para Patrones Avanzados

Referencia Rápida y Patrones Comunes

1. Contador con Múltiples Operaciones

2. Formulario con Validación

3. Obtención de Datos

4. Sincronización con Local Storage

Árbol de Decisión: ¿Qué Runa Usar?

Conclusiones Clave

Ver También

Documentación Oficial

Artículos Relacionados en Esta Serie

Recursos Externos

Introducción a la Reactividad de Svelte 5

Lo Que Deberías Saber

Por Qué Importa la Reactividad

El Problema: Mantener la UI Sincronizada con los Datos

La Solución: Programación Reactiva

¿Qué Son las Runas?

Visual: Cómo las Runas Transforman Tu Código

Referencia Completa de Runas

Visión General Rápida de Cada Runa

$state — Estado Reactivo

$derived — Valores Computados

$effect — Efectos Secundarios

$props — Props del Componente

$bindable — Enlace Bidireccional

¿Dónde Puedes Usar las Runas?

Svelte 4 vs Svelte 5: Guía de Migración

Gestión de Estado

API de Componentes

Ciclo de Vida

Recomendaciones de Ruta de Aprendizaje

Para Principiantes Absolutos

Para Desarrolladores de React/Vue

Para Desarrolladores de Svelte 4

Para Patrones Avanzados

Referencia Rápida y Patrones Comunes

1. Contador con Múltiples Operaciones

2. Formulario con Validación

3. Obtención de Datos

4. Sincronización con Local Storage

Árbol de Decisión: ¿Qué Runa Usar?

Conclusiones Clave

Ver También

Documentación Oficial

Artículos Relacionados en Esta Serie

Recursos Externos

`$state` — Estado Reactivo

`$derived` — Valores Computados

`$effect` — Efectos Secundarios

`$props` — Props del Componente

`$bindable` — Enlace Bidireccional