Signals

ELI5 — The Vibe Check

Signals are reactive primitives that hold a value and automatically notify the UI when that value changes — with surgical precision. Unlike React's useState (which re-renders the whole component), signals update only the exact DOM nodes that use the value. Think of signals as smart variables: change the value, and every place in the UI that reads it instantly updates. No re-renders. No virtual DOM diffing. Just direct updates.

Real Talk

Signals are a reactive programming primitive that represent a value which can be read, written, and subscribed to. When a signal's value changes, all computed values and UI bindings that depend on it are automatically and synchronously updated. Signals enable fine-grained reactivity without virtual DOM diffing. Adopted by SolidJS (original), Angular (v16+), Vue (refs are signals), Preact, and the TC39 proposal for native JavaScript signals.

Show Me The Code

// Preact signals example
import { signal, computed, effect } from '@preact/signals';

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

effect(() => {
  console.log(`Count is: ${count.value}`);
});

count.value = 5; // Logs: "Count is: 5"
console.log(doubled.value); // 10

When You'll Hear This

"Angular adopted signals — it's a game changer for performance." / "Signals give you fine-grained reactivity without the virtual DOM overhead."