Por Qué las Variables No Son Suficientes

Si vienes de JavaScript vanilla, podrías esperar que cambiar una variable actualice automáticamente todo lo que la usa. En programas basados en consola o scripts simples, este modelo mental funciona bien — cambias un valor y la próxima vez que lo referencias obtienes el nuevo valor.

Pero las UIs web son diferentes. El HTML que ves en pantalla es una instantánea de tus datos en un momento específico en el tiempo. Cuando cambias una variable de JavaScript, el navegador no sabe que debería mirar ese HTML nuevamente y actualizarlo. Existe una desconexión fundamental entre el estado de tu JavaScript y lo que ven los usuarios.

Esta lección explica esa desconexión, por qué existe y cómo la runa $state de Svelte cierra la brecha para crear interfaces de usuario verdaderamente reactivas.

Lo Que Aprenderás

Por qué las variables regulares no disparan actualizaciones de UI
Qué significa "reactividad" en Svelte
Cómo la runa $state crea estado reactivo

El Problema: Variables Estáticas

Experimentemos esta desconexión de primera mano construyendo un contador simple con JavaScript plano. Este ejemplo te mostrará exactamente por qué las variables regulares no funcionan para construir UIs interactivas.

<!-- filename: src/routes/+page.svelte -->
<script>
	let count = 0

	function increment() {
		count = count + 1
		console.log(count) // This logs correctly!
	}
</script>

<p>Count: {count}</p>
<button onclick={increment}>Add One</button>

Qué Sucede Cuando Ejecutas Esto

Renderizado inicial: Svelte lee count (que es 0) y pone "Count: 0" en el HTML
Haces clic en el botón: La función increment se ejecuta
La variable cambia: count se convierte en 1, luego 2, luego 3...
La consola lo confirma: Revisa la consola de tu navegador — verás los números aumentando
Pero la página permanece congelada: La pantalla sigue mostrando "Count: 0"

¡Esto es confuso! La variable count claramente está cambiando (podemos verlo en la consola), pero el número en la página nunca se actualiza. ¿Por qué?

El Problema Central

El problema es que las variables de JavaScript no están conectadas al DOM. Cuando Svelte renderiza tu componente por primera vez, lee el valor de count y escribe "Count: 0" en el HTML. Después de eso, Svelte no tiene idea de que count existe o de que podría cambiar.

Piénsalo como tomar una foto: la foto captura cómo lucían las cosas en un momento. Si alguien se mueve después de que tomas la foto, la foto no se actualiza mágicamente para mostrar su nueva posición. De manera similar, el HTML capturó el valor de count en un momento (cuando la página cargó), y no tiene forma de saber que la variable cambió después.

Por Qué Sucede Esto

Para entender por qué las variables regulares no actualizan la UI, necesitas entender cómo Svelte (y la mayoría de los frameworks de UI) funcionan internamente.

El Proceso de Renderizado

Cuando Svelte compila tu componente:

Tiempo de compilación: Svelte analiza tu código y genera JavaScript optimizado
Tiempo de ejecución (carga de página): Tu componente se ejecuta, las variables se inicializan y se crea el HTML inicial
Visualización: El navegador muestra ese HTML a los usuarios
Después de eso: JavaScript continúa ejecutándose, pero el HTML ya fue renderizado

Cuando haces clic en el botón y cambias count, eso sucede en el paso 4 — después de que el HTML ya está en pantalla. El navegador no tiene idea de que debería volver a ejecutar el proceso de renderizado.

Las Variables de JavaScript Son "Silenciosas"

Las variables regulares de JavaScript no anuncian cuando cambian. No existe un mecanismo incorporado donde una variable diga "¡Oye! ¡Acabo de cambiar de 0 a 1!" Así simplemente no funciona JavaScript.

Considera este código:

let count = 0
count = 1 // Nothing "listens" to this change

La asignación ocurre, el nuevo valor se almacena, pero no hay ningún evento, ninguna notificación, ninguna forma de que otro código detecte el cambio automáticamente.

La Analogía de la Pizarra

Piénsalo así: escribes un número en una pizarra. Otra persona copia ese número en un papel. Más tarde, borras y escribes un nuevo número en la pizarra. El papel todavía muestra el número viejo — no se actualiza mágicamente solo porque la pizarra cambió.

La pizarra es tu variable de JavaScript. El papel es el HTML que se muestra a los usuarios. Cambiar la pizarra (variable) no cambia automáticamente el papel (DOM).

Lo Que Necesita Svelte

Svelte necesita una señal que diga "este valor cambió, actualiza la UI." Necesita estado reactivo — variables que puedan difundir sus cambios para que Svelte sepa cuándo actualizar el DOM. Eso es exactamente lo que provee la runa $state.

La Solución: `$state`

Svelte 5 introduce las runas — instrucciones especiales que le dicen a Svelte cómo manejar los datos. Una de estas es la runa $state, que crea estado reactivo:

<!-- filename: src/routes/+page.svelte -->

<script>
	let count = $state(0)

	function increment() {
		count = count + 1
	}
</script>

<p>Count: {count}</p>
<button onclick={increment}>Add One</button>

Puedes probarlo en Svelte REPL

Ahora haz clic en el botón. La pantalla se actualiza: 1, 2, 3, 4...

El único cambio fue envolver 0 en $state(). Esa única adición le dice a Svelte: "Observa esta variable. Cuando cambie, actualiza todo lo que la usa."

Cómo Funciona `$state`

Ahora echemos un vistazo detrás del telón y entendamos qué hace realmente $state para que funcione la reactividad.

La Magia de `$state`

Cuando escribes let count = $state(0):

Svelte crea una señal reactiva inicializada en 0 — este es un wrapper especial alrededor de tu valor
Svelte escanea tu template y rastrea todos los lugares donde se usa count (como en <p>Count: {count}</p>)
Svelte establece una suscripción — cuando count cambia, Svelte sabe qué partes del DOM necesitan actualizarse
Cuando asignas un nuevo valor a count (como count = count + 1), Svelte intercepta esa asignación
Svelte actualiza el DOM — pero solo las partes específicas que usan count, no toda la página

Sigues Escribiendo JavaScript Normal

La belleza de $state es que usas count exactamente como una variable normal:

<script>
	let count = $state(0)

	// Read it like normal
	console.log(count) // 0

	// Assign to it like normal
	count = 5

	// Use it in expressions like normal
	let doubled = count * 2
</script>

No necesitas llamar a métodos especiales de getter/setter. No necesitas envolver cada lectura y escritura en llamadas a funciones. La reactividad ocurre automáticamente detrás de escena, gracias al compilador de Svelte.

Actualizaciones Eficientes

Un detalle crucial: cuando count cambia, Svelte no re-renderiza todo tu componente. Solo actualiza los nodos del DOM específicos que muestran count. Esto hace que las aplicaciones de Svelte sean increíblemente rápidas.

Si tienes:

<h1>Welcome to BookIt</h1><p>Count: {count}</p><footer>© 2025 BookIt</footer>

Cambiar count solo actualiza la etiqueta <p>, no el encabezado ni el pie de página. Svelte sabe exactamente qué necesita cambiar.

¿Y Qué Hay de BookIt?

Ahora conectemos este concepto con la aplicación BookIt que estás construyendo. Entender la reactividad es crucial para crear el formulario de reservas.

Los Requisitos del Formulario de Reservas

BookIt necesita un formulario de reservas donde los usuarios:

Escriban su nombre
Ingresen su dirección de correo electrónico
Seleccionen un servicio de un menú desplegable
Elijan una fecha y hora
Vean una vista previa en vivo de los detalles de su reserva mientras lo completan

Ese último requisito — vista previa en vivo — solo es posible con estado reactivo.

Sin Estado Reactivo

Imagina construir el formulario con variables regulares:

<script>
	let customerName = '' // Regular variable
</script>

<input type="text" bind:value={customerName} /><p>Booking for: {customerName}</p>

El input funcionaría (podrías escribir en él), pero la etiqueta <p> que muestra la vista previa permanecería vacía. Leería customerName una vez cuando la página carga (cuando es una cadena vacía) y nunca se actualizaría.

Con Estado Reactivo

Ahora con $state:

<script>
	let customerName = $state('') // Reactive state
</script>

<input type="text" bind:value={customerName} /><p>Booking for: {customerName}</p>

Cada pulsación de tecla actualiza customerName, y Svelte actualiza automáticamente la vista previa. El usuario ve su nombre aparecer en tiempo real mientras escribe. Esto es lo que hace que las aplicaciones web modernas se sientan responsivas y vivas.

Construyendo sobre esta base

En las próximas lecciones:

Crearemos un formulario de reserva completo con múltiples variables $state
Conectaremos inputs con vinculación bidireccional
Construiremos un panel de vista previa en vivo que se actualiza mientras los usuarios escriben
Manejaremos el envío del formulario

Por ahora, la idea clave es: $state es lo que hace posibles las interfaces dinámicas. Cada parte interactiva de BookIt — desde el formulario de reserva hasta los filtros de búsqueda y los selectores de fecha — utilizará estado reactivo.

Cuándo usar `$state`

Usa $state cuando:

El valor cambiará durante la vida útil del componente
La interfaz debe actualizarse cuando el valor cambie
Se necesite rastrear la entrada del usuario

No es necesario usar $state para:

Constantes que nunca cambian
Valores que solo se usan en cálculos, no en la visualización
Datos recibidos como props (se manejan de forma diferente)

<script>
	// ✅ Reactive — changes based on user input
	let searchQuery = $state('')

	// ❌ Not needed — this never changes
	let API_URL = 'https://api.bookit.example'

	// ❌ Not needed — constant configuration
	const MAX_BOOKINGS = 10
</script>

Errores comunes

Olvidar `$state`

<script>
	// ❌ Won't update the UI
	let name = ''

	// ✅ UI updates when name changes
	let name = $state('')
</script>

Si tu interfaz no se actualiza cuando lo esperas, verifica si olvidaste usar $state.

Usar `$state` para todo

<script>
	// ❌ Overkill — this never changes
	let title = $state('BookIt')

	// ✅ Simple constant
	let title = 'BookIt'
</script>

Usa $state únicamente para los valores que realmente necesitan ser reactivos.

Resumen

Las variables JavaScript regulares no desencadenan actualizaciones en la interfaz. La runa $state de Svelte crea estado reactivo que actualiza automáticamente el DOM cuando los valores cambian. Esta es la base de las aplicaciones interactivas en Svelte.

Puntos clave:

Las variables simples se renderizan una vez y no actualizan la interfaz
$state(initialValue) crea estado reactivo
Usa $state para valores que cambian y afectan la visualización

Próximos pasos

Ahora que entiendes la reactividad, pongámosla en práctica. Continúa con Crear un componente de formulario de reserva para comenzar a construir la funcionalidad principal de BookIt.