Preact Signals

Qué es

Preact Signals es una librería de gestión de estado reactivo creada por el equipo de Preact. Se basa en el concepto de “signal”: un contenedor observable cuyo valor se lee y escribe a través de la propiedad .value, mientras la referencia de la señal permanece constante. Su núcleo es agnóstico al framework y se distribuye en tres paquetes: @preact/signals-core (la base sin dependencias de framework), @preact/signals (integración con Preact) y @preact/signals-react (integración con React). Está escrita en TypeScript y publicada bajo licencia MIT.

Para qué sirve

• Gestionar el estado de una aplicación con seguimiento automático de dependencias.
• Derivar valores calculados a partir de otras señales sin recálculos manuales.
• Ejecutar efectos secundarios que se vuelven a lanzar solo cuando cambian las señales que usan.
• Actualizar la UI de forma eficiente, re-renderizando únicamente lo que depende de cada señal.

Cuándo usarlo

• Cuando trabajas con Preact o React y quieres una gestión de estado ligera que minimice los re-renderizados sin selectores ni funciones envoltorio.
• Es una alternativa a soluciones como Redux, Zustand o Jotai, con un modelo mental más cercano a la reactividad de SolidJS o Vue. En React requiere configurar el transform de Babel o usar los hooks que ofrece su paquete de integración.

Ejemplo

Instalación y uso básico con el núcleo agnóstico:

npm install @preact/signals-core

import { signal, computed, effect, batch } from '@preact/signals-core';

const count = signal(0);
const doubled = computed(() => count.value * 2);

effect(() => {
  console.log('count:', count.value, 'doubled:', doubled.value);
});

count.value = 1; // dispara el effect

batch(() => {
  count.value = 5;
  count.value = 10; // el effect se ejecuta una sola vez al final
});

En Preact puedes pasar la señal directamente al JSX sin leer .value, y el componente se actualiza de forma óptima cuando cambia.

Puntos clave

• Núcleo agnóstico al framework reutilizable fuera de Preact y React.
• Seguimiento automático de dependencias y evaluación perezosa por defecto.
• Integración nativa con Preact que permite mutaciones directas del DOM evitando el diffing virtual.
• API mínima: signal, computed, effect, batch, untracked y .peek().

Ten en cuenta

• En React la integración no es tan transparente como en Preact: hay que añadir el transform de Babel o apoyarse en los hooks del paquete @preact/signals-react para que las señales activen los re-renderizados.
• El patrón basado en .value y la mutación directa difiere del modelo inmutable habitual en React, por lo que conviene tenerlo claro antes de mezclarlo con código existente.