ShaharAmir
← Back to Blog
JavaScript3 min read

JavaScript Signals: The Future of Reactivity

Fine-grained reactivity coming to JavaScript itself

S
Shahar Amir

JavaScript Signals: The Future of Reactivity

Signals are everywhere — Vue, Solid, Angular, Svelte, Preact. Now they're coming to JavaScript itself.

What Are Signals?

Signals are reactive primitives. When a signal's value changes, anything that depends on it updates automatically.

javascript
123456789
// Create a signal
const count = new Signal.State(0);


// Read it
console.log(count.get()); // 0


// Update it
count.set(1);
count.set(prev => prev + 1);

Computed Values

Derived values that auto-update:

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


console.log(doubled.get()); // 0


count.set(5);
console.log(doubled.get()); // 10 (auto-updated!)

Why Signals Beat useState

React re-renders entire components. Signals update only what changed.

javascript
123456789101112131415
// React: Component re-renders on any state change
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}


// Signals: Only the text node updates
function Counter() {
  const count = new Signal.State(0);
  return (
    <button onClick={() => count.set(c => c + 1)}>
      {count} {/* Only this updates */}
    </button>
  );
}

Effects (Reactions)

Run code when signals change:

javascript
12345678910
const name = new Signal.State("John");


// Effect runs when dependencies change
const effect = new Signal.subtle.Watcher(() => {
  console.log(`Name changed to: ${name.get()}`);
});


effect.watch();


name.set("Jane"); // Logs: "Name changed to: Jane"

The TC39 Proposal

Signals are being standardized for JavaScript:

javascript
12345
// Proposed API (may change)
import { Signal } from "std:signal";


const state = new Signal.State(initialValue);
const computed = new Signal.Computed(() => derivedValue);

Framework Implementations

Every major framework has signals now:

javascript
1234567891011121314
// Vue 3
const count = ref(0);


// Solid
const [count, setCount] = createSignal(0);


// Angular
const count = signal(0);


// Preact Signals
const count = signal(0);


// Svelte 5 (Runes)
let count = $state(0);

Benefits

1. Fine-Grained Updates

javascript
12
// Only the specific DOM node updates
// Not the entire component tree

2. No Stale Closures

javascript
12
// Signals always have current value
// No dependency arrays needed

3. Better Performance

javascript
12
// Less work = faster updates
// Especially in large apps

4. Simpler Mental Model

javascript
123456
const a = new Signal.State(1);
const b = new Signal.State(2);
const sum = new Signal.Computed(() => a.get() + b.get());


// sum always equals a + b
// No manual synchronization

When Will It Land?

The TC39 proposal is at Stage 1. Estimated timeline:

  • 2025: Stage 2/3
  • 2026-2027: Stage 4 (finalized)
  • 2027+: Browser implementation

Use Signals Today

Don't wait — use a library:

javascript
123456789
// @preact/signals-core (framework-agnostic)
import { signal, computed, effect } from "@preact/signals-core";


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


effect(() => {
  console.log(count.value);
});

The Takeaway

Signals solve React's re-rendering problem at the language level. When JavaScript gets native signals, reactivity will be faster and simpler everywhere.

Start learning signals now — they're the future.

#signals#reactivity#tc39#future

Stay Updated 📬

Get the latest tips and tutorials delivered to your inbox. No spam, unsubscribe anytime.