Nevermind

Signals: la nueva ola de reactividad en el frontend

3 min

1. La evolución de los modelos reactivos

La esencia del desarrollo frontend consiste en «convertir el estado en una interfaz de usuario». A lo largo de los años hemos presenciado la evolución continua de los modelos reactivos: desde la manipulación manual del DOM, pasando por los patrones MVC/MVVM, hasta el DOM virtual (Virtual DOM) popularizado por React. Al procesar por lotes los cambios de estado y realizar el Diffing a nivel de componente, el VDOM simplificó enormemente el desarrollo de interfaces.

Sin embargo, el VDOM no es una solución universal. El coste de volver a renderizar y hacer Diffing a nivel de componente puede convertirse en un cuello de botella en ciertos escenarios muy dinámicos. En los últimos años, un paradigma más antiguo pero optimizado mediante compiladores modernos —la reactividad de granularidad fina (Fine-Grained Reactivity)— ha vuelto al centro del escenario, y su principal vehículo son los Signals.

2. ¿Qué son los Signals?

Un Signal es una primitiva reactiva (Reactive Primitive) que encapsula un valor y puede notificar automáticamente a todas sus dependencias cuando dicho valor cambia. A diferencia de los frameworks VDOM, que rastrean los cambios a nivel de componente, un Signal crea automáticamente un grafo de dependencias en el punto donde se leen los datos.

Cuando se actualiza el valor de un Signal, solo se vuelven a ejecutar los cálculos (Memo) o efectos secundarios (Effect) que dependen directa o indirectamente de él. Así se consiguen actualizaciones precisas y «quirúrgicas» del DOM, sin necesidad de realizar Diffing sobre un VDOM.

Su núcleo suele estar formado por tres primitivas:

  • createSignal(value): Crea una unidad de estado reactiva.
  • createEffect(() => {}): Crea un efecto secundario que rastrea automáticamente sus dependencias y responde a los cambios.
  • createMemo(() => {}): Crea un cálculo reactivo derivado y almacenado en caché.
// SolidJS 语法示例
const [count, setCount] = createSignal(0);

const doubleCount = createMemo(() => count() * 2);

createEffect(() => {
  console.log(`The double count is: ${doubleCount()}`);
});

setCount(1); // 这将触发 memo 重新计算，并触发 effect 重新执行

Un modelo mental fundamental es que, en un framework basado en Signals como SolidJS, la propia función del componente solo se ejecuta una vez durante la inicialización. Las actualizaciones posteriores están completamente impulsadas por el sistema reactivo, no por una nueva renderización del componente.

3. Adopción generalizada en el ecosistema

Los Signals no son un concepto totalmente nuevo; sus ideas se remontan a frameworks tempranos como Knockout.js. Sin embargo, gracias a los compiladores modernos de JavaScript, han cobrado nueva vida y han sido adoptados ampliamente por los principales frameworks:

  • SolidJS & Qwik: Están construidos por completo sobre Signals y son implementaciones de referencia de este paradigma.
  • Preact: Incorporó soporte oficial mediante el paquete @preact/signals, que puede integrarse en proyectos existentes de Preact/React.
  • Vue: ref y computed de su Composition API son, en esencia, una implementación de Signals.
  • Svelte 5: La próxima actualización «Runes» supone una reestructuración del modelo reactivo de Svelte, inspirada y basada en el paradigma de Signals.
  • Angular: Sus versiones recientes también han incorporado Signals como nuevas primitivas reactivas.

Esta convergencia entre frameworks demuestra el valor de los Signals como modelo reactivo eficiente y predecible.

4. Ventajas y concesiones

Ventajas:

  1. Rendimiento excelente: Al evitar el VDOM y las nuevas renderizaciones a nivel de componente, suele ofrecer resultados sobresalientes en las pruebas de rendimiento.
  2. Previsibilidad: El flujo de las actualizaciones de estado es claro y fácil de comprender y depurar.
  3. Bajo uso de memoria: No es necesario mantener una representación virtual de todo el árbol de componentes.

Concesiones:

  1. Cambio de modelo mental: Los desarrolladores acostumbrados al ciclo de renderización de React deben adaptarse al nuevo modelo en el que «el componente solo se ejecuta una vez».
  2. Integración con el ecosistema: Aunque los Signals son potentes por sí mismos, su integración profunda con el enorme ecosistema VDOM de React —por ejemplo, con ciertas bibliotecas de UI— puede requerir trabajo adicional de adaptación.

Conclusión

El resurgimiento de los Signals marca una evolución importante en los paradigmas de gestión de estado del frontend. Devuelve la atención de los desarrolladores desde «cómo se renderiza un componente» hacia la cuestión más esencial de «cómo fluye el estado». Gracias a su profunda integración con los compiladores, los Signals ofrecen una excelente experiencia de desarrollo y, al mismo tiempo, abren nuevas posibilidades en los límites de rendimiento de las aplicaciones Web.

Signals Reactividad Frontend Framework Rendimiento