Signals en JavaScript: TC39 Quiere Hacer de la Reactividad Un Estándar Nativo del Lenguaje

Hola HaWkers, una propuesta está agitando el mundo JavaScript: Signals podría convertirse en parte oficial del lenguaje. Esto significa reactividad nativa, sin necesitar frameworks.

Angular, Vue, Solid, Svelte - todos ya usan Signals. Pero React no. Vamos a entender esta división y lo que significa para el futuro.

Qué Son Signals

Entendiendo el concepto fundamental.

Reactividad Primitiva

Signals son valores reactivos:

// Propuesta actual del TC39
const count = new Signal.State(0);

// Leer el valor
console.log(count.get()); // 0

// Actualizar el valor
count.set(1);

// Computación derivada
const double = new Signal.Computed(() => count.get() * 2);

console.log(double.get()); // 2

Por Qué Esto Importa

Diferencia con estado tradicional:

Sin Signals (estado manual):

let count = 0;
let double = count * 2;

// Problema: double no actualiza automáticamente
count = 5;
console.log(double); // ¡Aún 0! No es reactivo

Con Signals (reactivo):

const count = new Signal.State(0);
const double = new Signal.Computed(() => count.get() * 2);

count.set(5);
console.log(double.get()); // 10 - ¡Actualiza automáticamente!

Cómo Frameworks Usan Signals

Cada framework tiene su implementación.

Vue 3

Signals bajo el nombre "ref":

import { ref, computed } from 'vue';

// Signal de estado
const count = ref(0);

// Signal computado
const double = computed(() => count.value * 2);

// Template reacciona automáticamente
<template>
  <button @click="count++">
    {{ count }} x 2 = {{ double }}
  </button>
</template>

Angular

Signals oficiales desde Angular 16:

import { signal, computed, effect } from '@angular/core';

// Signal de estado
const count = signal(0);

// Signal computado
const double = computed(() => count() * 2);

// Efecto colateral
effect(() => {
  console.log(`Count es ahora: ${count()}`);
});

// Actualizar
count.set(5);
count.update(n => n + 1);

Solid.js

Signals son el núcleo del framework:

import { createSignal, createMemo, createEffect } from 'solid-js';

const [count, setCount] = createSignal(0);
const double = createMemo(() => count() * 2);

createEffect(() => {
  console.log(`Count: ${count()}, Double: ${double()}`);
});

// JSX es reactivo a nivel de expresión
<button onClick={() => setCount(c => c + 1)}>
  {count()} x 2 = {double()}
</button>

Svelte 5 (Runes)

Nueva sintaxis con runes:

<script>
  let count = $state(0);
  let double = $derived(count * 2);

  $effect(() => {
    console.log(`Count es ${count}`);
  });
</script>

<button onclick={() => count++}>
  {count} x 2 = {double}
</button>

Por Qué React No Usa Signals

La controversia explicada.

Filosofía Diferente

React eligió otro camino:

Modelo de React (Virtual DOM):

function Counter() {
  const [count, setCount] = useState(0);
  const double = count * 2; // Recalcula en cada render

  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count} x 2 = {double}
    </button>
  );
}
// Componente entero re-renderiza cuando count cambia

Modelo Signals (Reactividad granular):

function Counter() {
  const count = signal(0);
  const double = computed(() => count() * 2);

  return (
    <button onClick={() => count.set(c => c + 1)}>
      {count()} x 2 = {double()}
    </button>
  );
}
// Solo las expresiones {count()} y {double()} actualizan

Trade-offs

Cada enfoque tiene ventajas:

Aspecto	React Hooks	Signals
Performance	Re-render componente	Update granular
Modelo mental	Simple y predecible	Más complejo
Debug	React DevTools	Más difícil
Bundle size	Mayor	Menor
Server rendering	Maduro	Evolucionando

Posición Oficial de React

Lo que el equipo de React dice:

"Signals son optimización de performance, no un nuevo paradigma. React prefiere mantener el modelo mental simple y optimizar por debajo."

Estrategia de React:

• React Compiler (antiguo React Forget)
• Memoización automática
• Concurrent rendering
• Server Components

La Propuesta TC39

Lo que se está estandarizando.

Estado Actual

Progreso en el comité:

Stage 1 (Proposal):

• Aprobado en abril 2024
• Polyfill disponible
• Implementaciones experimentales
• Discusiones activas

API Propuesta

Interface planeada:

// Signal de estado
const counter = new Signal.State(0);

// Lectura
counter.get(); // 0

// Escritura
counter.set(1);

// Signal computado
const doubled = new Signal.Computed(() => counter.get() * 2);

// Solo lectura
doubled.get(); // 2

// Watcher para efectos
const watcher = new Signal.subtle.Watcher(() => {
  // Notifica cuando signals observados cambian
  console.log("¡Algo cambió!");
});

watcher.watch(doubled);

Por Qué En El Navegador

Beneficios de tenerlo nativo:

1. Interoperabilidad:

// Signals de Vue funcionando con Angular
import { ref } from 'vue';
import { signal } from '@angular/core';

// Hoy: Incompatibles
// Con estándar: Intercambiables

2. Performance:

• Implementación nativa en C++
• Optimizaciones del engine
• Menos overhead de abstracción
• Mejor integración con DOM

3. Consistencia:

• Misma API en todos los frameworks
• Portabilidad de código
• Documentación unificada
• Menos fragmentación

Impacto En Los Frameworks

Lo que cambia para cada uno.

Vue

Migración más fácil:

// Vue 3 hoy
import { ref, computed } from 'vue';
const count = ref(0);

// Vue futuro (posible)
const count = new Signal.State(0);
// Vue agrega solo capas de conveniencia

Angular

Ya está preparado:

// Angular hoy ya tiene API similar
import { signal, computed } from '@angular/core';

// Migración a nativo sería transparente
// Principalmente ganancias de performance

Solid

Valida el enfoque:

// Solid ya usa API muy similar
// Sería casi drop-in replacement
// Ryan Carniato está involucrado en la propuesta

React

Presión para adaptarse:

Escenarios posibles:

1. React ignora y mantiene enfoque actual
2. React crea capa de compatibilidad
3. React ofrece modo "signals" opcional
4. Nuevo framework emerge dominante

Performance En La Práctica

Benchmarks reales.

Comparativo de Frameworks

Test de actualización de 10,000 items:

Framework	Tiempo (ms)	Memoria (MB)
Vanilla + Signals	12	8
Solid.js	14	10
Vue 3	18	12
Svelte 5	16	11
Angular 19	22	15
React 19	45	28

Cuando Signals Brillan

Casos de uso ideales:

Dashboards con muchos datos:

// Con Virtual DOM: Todo re-renderiza
// Con Signals: Solo celdas alteradas actualizan

const cells = Array(10000).fill(null).map(() =>
  new Signal.State(Math.random())
);

// Actualizar una celda: O(1) con Signals
cells[5000].set(0.5);

Formularios complejos:

// Validación reactiva y granular
const email = new Signal.State('');
const isValid = new Signal.Computed(() =>
  email.get().includes('@')
);

// Solo el indicador de validación actualiza

Animaciones y juegos:

// Updates de 60fps
const position = new Signal.State({ x: 0, y: 0 });

// Mínimo overhead por frame
requestAnimationFrame(() => {
  position.set({ x: position.get().x + 1, y: 0 });
});

Usando Signals Hoy

Cómo experimentar ahora.

Polyfill Oficial

Instalación y uso:

npm install signal-polyfill

import { Signal } from 'signal-polyfill';

const count = new Signal.State(0);
const double = new Signal.Computed(() => count.get() * 2);

// Funciona en cualquier ambiente
console.log(double.get()); // 0

count.set(5);
console.log(double.get()); // 10

Frameworks Listos

Opciones para producción:

Si quieres Signals hoy:

1. Solid.js - Más puro en Signals
2. Vue 3 - Signals como "refs"
3. Angular 17+ - Signals oficiales
4. Svelte 5 - Runes (Signals con sintaxis)

Bibliotecas standalone:

• Preact Signals
• @preact/signals-core
• MobX (concepto similar)

El Futuro

Hacia dónde vamos.

Timeline Probable

Expectativas realistas:

2026:

• Stage 2 de la propuesta
• Polyfills estables
• Experimentos en browsers

2027:

• Stage 3 (candidato)
• Implementaciones nativas comienzan
• Frameworks adaptándose

2028+:

• Stage 4 (finalizado)
• Disponible en browsers
• Nueva era de frameworks

Impacto en la Carrera

Lo que desarrolladores deben hacer:

Corto plazo:

• Entiende el concepto de Signals
• Experimenta en proyectos personales
• Continúa usando tu framework actual

Mediano plazo:

• Acompaña la propuesta TC39
• Evalúa Solid/Vue/Angular
• Prepárate para cambios

Largo plazo:

• Signals será conocimiento base
• Frameworks convergirán
• Nuevas arquitecturas surgirán

Conclusión

Signals representa una posible unificación del ecosistema JavaScript. Sea la propuesta aprobada o no, el concepto ya domina los frameworks modernos - Angular, Vue, Solid, Svelte todos convergen hacia este enfoque.

React continúa en camino propio, pero la presión aumenta. El tiempo dirá si el Virtual DOM se mantiene competitivo o si Signals se convierte en el estándar.

Para desarrolladores, el consejo es: entiende el concepto ahora. Sea cual sea el resultado, reactividad granular es una tendencia clara.

Si quieres fortalecer tu base en JavaScript, echa un vistazo a nuestro artículo sobre ES2026 y Temporal API para ver otras novedades importantes del lenguaje.

Vamos con todo! 🦅

💻 Domina JavaScript de Verdad

El conocimiento que adquiriste en este artículo es solo el comienzo. Entender conceptos fundamentales como reactividad exige base sólida en el lenguaje.

Invierte en Tu Futuro

He preparado material completo para que domines JavaScript:

Formas de pago:

• 1x de $4.90 sin intereses
• o $4.90 al contado

📖 Ver Contenido Completo