Todo lo que Necesitas Saber sobre la Reactividad Declarativa en Svelte

---

La reactividad declarativa en Svelte es una característica poderosa que permite que el estado de las variables actualice automáticamente la interfaz de usuario sin necesidad de manejar manualmente eventos o cambios. Gracias a este enfoque, la creación de aplicaciones se vuelve más dinámica, eficiente y limpia, reduciendo la complejidad del código y mejorando el rendimiento.

¿Cómo funciona la reactividad declarativa en Svelte?

En Svelte, la reactividad declarativa se basa en la detección automática de dependencias. Cuando una variable cambia, todos los bloques de código que dependen de ella se actualizan automáticamente. Para implementar reactividad declarativa, simplemente usamos el carácter $: para indicar que un bloque o expresión depende de variables reactivas.

Esto permite un flujo de trabajo más limpio y fácil de mantener, sin tener que lidiar con herramientas externas como observadores o frameworks adicionales.

Ejemplo básico de reactividad declarativa

<script>
let count = 0;
$: double = count * 2; // 'double' se recalcula automáticamente cuando 'count' cambia.
</script>

<p>Count: {count}</p>
<p>Double: {double}</p>

<button on:click={() => count++}>Incrementar</button>

En este escenario, la variable double se recalcula automáticamente cada vez que count cambia, y la UI refleja el nuevo valor sin necesidad de código adicional.

Ventajas de la reactividad declarativa

1. Simplicidad: No es necesario escribir código adicional para manejar cambios de estado o actualizaciones de la UI.
2. Rendimiento: Svelte optimiza el código de manera que las actualizaciones sean muy rápidas, evitando re-renderizados innecesarios.
3. Legibilidad: El código es más fácil de entender, ya que los cambios de estado están directamente relacionados con las actualizaciones visuales, lo que mejora la claridad.

Reactividad en funciones

Puedes usar la reactividad declarativa para ejecutar funciones o realizar tareas cada vez que cambie una variable:

<script>
let nombre = "urian Viera";
$: console.log(`El nombre actual es ${nombre}`);
</script>

<input bind:value={nombre} placeholder="Escribe tu nombre" />

En este caso, cada vez que el valor del input cambia, la función console.log se ejecuta automáticamente, mostrando el nuevo valor de la variable nombre.

Reactividad con múltiples dependencias

Puedes definir variables reactivas que dependen de varias otras variables:

<script>
let ancho = 25;
let alto = 48;
$: area = ancho * alto;
</script>

<p>El área es: {area}</p>

Aquí, la variable area se recalcula automáticamente cada vez que cambian las variables ancho o alto.

Reactividad en arrays y objetos

Svelte también permite la reactividad en arrays u objetos. Si modificas una propiedad de un objeto o agregas un valor a un array, el código se actualizará automáticamente:

<script>
# Esto es un ejemplo de reactividad en un array
let tareas = ["Estudiar", "Comer", "Ejercitarse"];
$: cantidadTareas = tareas.length;
</script>

<p>Tienes {cantidadTareas} tareas pendientes.</p>
<button on:click={() => tareas.push("Leer")}>Agregar tarea</button>

En este caso, cada vez que se agrega una tarea al array, cantidadTareas se recalcula automáticamente, actualizando la UI.

Declaración reactiva con $:

El operador $: permite que un bloque de código se reactive automáticamente cuando cambian las dependencias utilizadas en él.

Ejemplo:

En este escenario, el operador $: recalcula automáticamente la variable sum cada vez que cambian las variables a o b. Al hacer clic en los botones, se incrementan a o b, lo que actualiza automáticamente la suma sin necesidad de intervención manual. Este enfoque facilita la reactividad en Svelte.

<script>
let a = 2;
let b = 3;

$: sum = a + b; // Se recalcula automáticamente cuando cambian `a` o `b`.
</script>

<p>a: {a}, b: {b}, suma: {sum}</p>
<button on:click={() => a++}>Incrementar a</button>
<button on:click={() => b++}>Incrementar b</button>

Reactividad avanzada en Svelte

El Estado Reactivo: $state

Puedes usar variables directamente para la reactividad, pero $state permite agrupar y observar cambios más complejos en un estado global.

$derived

Genera valores derivados de otros estados.

Ejemplo:

<script>
import { writable, derived } from 'svelte/store';

const count = writable(0);
const doubled = derived(count, $count => $count * 2);
</script>

<p>Valor: {$count}</p>
<p>Doble: {$doubled}</p>
<button on:click={() => count.update(n => n + 1)}>Incrementar</button>

Efectos Secundarios con $effect

Útil para ejecutar efectos secundarios basados en cambios de valores reactivos.

Ejemplo:

<script>
import { writable } from 'svelte/store';

const count = writable(0);

$: {
  if ($count === 5) {
    alert('¡Llegaste a 5!');
  }
}
</script>

<p>Contador: {$count}</p>
<button on:click={() => count.update(n => n + 1)}>Incrementar</button>

Ejemplo de $derived en Svelte

En Svelte, $derived es un concepto que permite crear variables reactivas basadas en otras variables reactivas. Esto es útil cuando necesitas calcular o derivar nuevos valores de las variables existentes sin tener que escribir lógica adicional o utilizar el operador $:

El uso de $derived permite crear dependencias más complejas de manera más eficiente, lo que simplifica el código y mejora el rendimiento de la aplicación.

¿Cómo funciona $derived?

Cuando una variable cambia, las variables derivadas se recalculan automáticamente basándose en las dependencias que definimos. Esto facilita la creación de lógica más compleja, como la derivación de valores a partir de varias fuentes reactivas.

Ejemplo de $derived En el siguiente ejemplo, vamos a derivar una nueva variable total que depende de otras dos variables: precio y cantidad.

<script>
let precio = 50;
let cantidad = 3;

// Creando una variable derivada que depende de 'precio' y 'cantidad'
$: total = precio * cantidad;
</script>

<main>
<h1>Precio Total</h1>
<p>Precio unitario: ${precio}</p>
<p>Cantidad: {cantidad}</p>
<p><strong>Total: ${total}</strong></p>

<button on:click={() => precio += 10}>Aumentar precio</button>
<button on:click={() => cantidad += 1}>Aumentar cantidad</button>
</main>