Actualizando signals con set() y update()

Método set() para asignación

Los WritableSignal proporcionan el método set() como la forma más directa de actualizar su valor. Este método reemplaza completamente el valor actual del signal con uno nuevo, disparando automáticamente las notificaciones a todos los consumidores que dependen de él.

La sintaxis del método set() es extremadamente simple y funciona con cualquier tipo de dato:

import { signal } from '@angular/core';

const contador = signal(0);
const nombre = signal('Juan');
const activo = signal(false);

// Asignación directa de nuevos valores
contador.set(10);
nombre.set('María');
activo.set(true);

Asignación con tipos primitivos

El método set() resulta ideal cuando necesitamos asignar valores completamente nuevos, especialmente con tipos primitivos como números, strings y booleanos:

// Signal numérico
const edad = signal(25);
edad.set(30); // Valor anterior: 25, nuevo valor: 30

// Signal string  
const mensaje = signal('Hola');
mensaje.set('Adiós'); // Valor anterior: 'Hola', nuevo valor: 'Adiós'

// Signal boolean
const cargando = signal(true);
cargando.set(false); // Valor anterior: true, nuevo valor: false

Cada llamada a set() sustituye por completo el valor anterior, sin importar cuál fuera. No hay operaciones incrementales ni transformaciones, simplemente asignación directa.

Trabajando con objetos y arrays

Cuando trabajamos con tipos de referencia como objetos y arrays, el método set() también realiza una sustitución completa:

interface Usuario {
  id: number;
  nombre: string;
  email: string;
}

const usuario = signal<Usuario>({
  id: 1,
  nombre: 'Ana',
  email: 'ana@email.com'
});

// Reemplazar todo el objeto
usuario.set({
  id: 2,
  nombre: 'Carlos',
  email: 'carlos@email.com'
});

Para arrays, el comportamiento es idéntico:

const numeros = signal([1, 2, 3]);
const frutas = signal(['manzana', 'pera']);

// Reemplazar todo el array
numeros.set([10, 20, 30, 40]);
frutas.set(['naranja', 'plátano', 'kiwi']);

Inmutabilidad y referencias

Una característica fundamental del método set() es que siempre debe recibir una nueva referencia cuando trabajamos con objetos o arrays. Esto garantiza que Angular detecte correctamente los cambios:

const configuracion = signal({
  tema: 'claro',
  idioma: 'es'
});

// ✅ Correcto: nueva referencia
configuracion.set({
  tema: 'oscuro',
  idioma: 'en'
});

// ❌ Incorrecto: misma referencia modificada
const config = configuracion();
config.tema = 'oscuro';
configuracion.set(config); // Angular no detectará el cambio

Casos de uso típicos

El método set() resulta especialmente útil en estos escenarios:

• Inicialización de formularios: Cargar datos desde una API y establecer valores iniciales
• Reset de estado: Restaurar valores por defecto tras completar operaciones
• Navegación entre vistas: Cambiar contexto completo de la aplicación
• Respuesta a eventos: Establecer nuevos valores basados en interacciones del usuario

const formulario = signal({
  nombre: '',
  email: '',
  telefono: ''
});

// Cargar datos del usuario
function cargarUsuario(datosApi: Usuario) {
  formulario.set({
    nombre: datosApi.nombre,
    email: datosApi.email,
    telefono: datosApi.telefono
  });
}

// Reset completo
function resetearFormulario() {
  formulario.set({
    nombre: '',
    email: '',
    telefono: ''
  });
}

La principal ventaja de set() es su claridad semántica: cuando vemos una llamada a este método, sabemos inmediatamente que el valor anterior será completamente reemplazado por el nuevo.

Método update() para transformaciones

El método update() de los WritableSignal proporciona una forma elegante de modificar el valor actual basándose en su estado anterior. A diferencia de set() que reemplaza completamente el valor, update() recibe una función de transformación que toma el valor actual como parámetro y devuelve el nuevo valor.

Esta aproximación funcional resulta especialmente valiosa cuando necesitamos realizar operaciones incrementales o modificaciones que dependen del estado existente:

import { signal } from '@angular/core';

const contador = signal(5);

// Incrementar el valor actual
contador.update(valor => valor + 1); // 5 → 6

// Operaciones más complejas
contador.update(valor => valor * 2 + 10); // 6 → 22

Transformaciones con tipos primitivos

Para números, strings y booleanos, el método update() permite operaciones matemáticas, concatenaciones y transformaciones lógicas de forma natural:

const puntuacion = signal(100);
const saludo = signal('Hola');
const completado = signal(false);

// Operaciones numéricas
puntuacion.update(actual => actual + 50); // Suma 50 puntos
puntuacion.update(actual => Math.round(actual * 1.1)); // Incremento del 10%

// Manipulación de strings
saludo.update(actual => actual + ' mundo'); // "Hola" → "Hola mundo"
saludo.update(actual => actual.toUpperCase()); // "HOLA MUNDO"

// Lógica condicional
completado.update(actual => !actual); // Toggle del estado

Modificaciones inmutables de objetos

Cuando trabajamos con objetos, update() brilla especialmente al permitir actualizaciones inmutables usando el spread operator:

interface Perfil {
  nombre: string;
  edad: number;
  activo: boolean;
}

const usuario = signal<Perfil>({
  nombre: 'Laura',
  edad: 28,
  activo: true
});

// Actualizar solo la edad manteniendo el resto
usuario.update(actual => ({
  ...actual,
  edad: actual.edad + 1
}));

// Modificar múltiples propiedades
usuario.update(actual => ({
  ...actual,
  nombre: actual.nombre.toUpperCase(),
  activo: false
}));

Esta técnica preserva la inmutabilidad al crear un nuevo objeto con las modificaciones necesarias, garantizando que Angular detecte correctamente los cambios.

Operaciones con arrays

Para arrays, update() facilita operaciones como agregar elementos, filtrar, mapear o realizar transformaciones complejas:

const tareas = signal<string[]>(['Comprar', 'Estudiar']);

// Agregar nueva tarea
tareas.update(lista => [...lista, 'Ejercicio']);

// Filtrar elementos
tareas.update(lista => lista.filter(tarea => tarea.length > 5));

// Transformar elementos
tareas.update(lista => lista.map(tarea => `📝 ${tarea}`));

Para arrays de objetos, podemos combinar estas técnicas:

interface Producto {
  id: number;
  nombre: string;
  precio: number;
}

const productos = signal<Producto[]>([
  { id: 1, nombre: 'Laptop', precio: 800 },
  { id: 2, nombre: 'Mouse', precio: 25 }
]);

// Actualizar precio de un producto específico
productos.update(lista => 
  lista.map(producto => 
    producto.id === 1 
      ? { ...producto, precio: producto.precio * 0.9 }
      : producto
  )
);

// Agregar nuevo producto
productos.update(lista => [
  ...lista,
  { id: 3, nombre: 'Teclado', precio: 60 }
]);

Transformaciones condicionales

El método update() permite implementar lógica condicional compleja dentro de la función de transformación:

const configuracion = signal({
  tema: 'claro',
  notificaciones: true,
  idioma: 'es'
});

// Cambio condicional basado en el estado actual
configuracion.update(config => ({
  ...config,
  tema: config.tema === 'claro' ? 'oscuro' : 'claro',
  notificaciones: config.tema === 'claro' ? false : config.notificaciones
}));

Cuándo usar update() vs set()

La elección entre update() y set() depende del tipo de modificación que necesitemos realizar:

Usar update() cuando:

• Necesitas el valor actual para calcular el nuevo
• Realizas operaciones incrementales (contadores, acumuladores)
• Modificas parcialmente objetos o arrays
• Implementas transformaciones basadas en lógica condicional

Usar set() cuando:

• Reemplazas completamente el valor
• El nuevo valor no depende del anterior
• Restauras valores por defecto
• Asignas datos externos (APIs, formularios)

const estado = signal({ contador: 0, mensaje: '' });

// update() para incrementar contador manteniendo mensaje
estado.update(actual => ({
  ...actual,
  contador: actual.contador + 1
}));

// set() para reset completo
estado.set({ contador: 0, mensaje: '' });

El método update() proporciona un enfoque funcional y expresivo para las modificaciones de estado, facilitando la escritura de código más legible y mantenible cuando las transformaciones requieren conocimiento del valor actual.