Signals in JavaScript: The New Era of Reactivity Transforming Frontend Development

Hello HaWkers, a silent revolution is happening in the JavaScript world: Signals are becoming the new reactivity standard for frontend frameworks. Angular, Vue, Solid, Svelte, and even the TC39 committee are embracing this approach.

Have you ever wondered why your component re-renders entirely when only a small value changes? Signals promise to solve exactly this problem. Let's understand how they work and why they're winning over the community.

What Are Signals

Signals are reactive primitives that represent a value that can change over time. When a Signal changes, only the parts of the UI that depend on it are updated, without needing to re-render the entire component.

Fundamental Concept

// Basic concept of a Signal
const count = signal(0);

// Read the value
console.log(count.value); // 0

// Update the value
count.value = 5;

// All dependencies are notified automatically

💡 Key difference: While React uses Virtual DOM and reconciliation, Signals update directly only the affected elements.

Why Signals Are Rising

The React and Virtual DOM Problem

The React model, while powerful, has limitations:

// React: When state changes, the ENTIRE component re-executes
function UserProfile({ userId }) {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [avatar, setAvatar] = useState('');

    // Changing ANY state causes complete re-render
    // Even if only the name changes, everything re-executes

    return (
        <div>
            <img src={avatar} /> {/* Re-renders even without changing */}
            <h1>{name}</h1>          {/* Only thing that changed */}
            <p>{email}</p>           {/* Re-renders even without changing */}
        </div>
    );
}

The Solution with Signals

// With Signals: Only the affected element updates
function UserProfile() {
    const name = signal('');
    const email = signal('');
    const avatar = signal('');

    // Changing name.value updates ONLY the <h1>
    // Nothing else re-executes

    return (
        <div>
            <img src={avatar.value} /> {/* Does not re-render */}
            <h1>{name.value}</h1>          {/* Only element updated */}
            <p>{email.value}</p>           {/* Does not re-render */}
        </div>
    );
}

Signals in Major Frameworks

Angular Signals

Angular adopted Signals in version 16+ as a new way to manage state:

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

@Component({
    selector: 'app-counter',
    template: `
        <div>
            <p>Count: {{ count() }}</p>
            <p>Double: {{ double() }}</p>
            <button (click)="increment()">+1</button>
        </div>
    `
})
export class CounterComponent {
    count = signal(0);
    double = computed(() => this.count() * 2);

    constructor() {
        effect(() => {
            console.log(`Count changed to: ${this.count()}`);
        });
    }

    increment() {
        this.count.update(c => c + 1);
    }
}

Solid.js Signals

Solid pioneered Signals in the modern JavaScript world:

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

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

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

    return (
        <div>
            <p>Count: {count()}</p>
            <p>Double: {double()}</p>
            <button onClick={() => setCount(c => c + 1)}>+1</button>
        </div>
    );
}

Svelte 5 Runes (Signals)

Svelte 5 introduced Runes, its version of Signals:

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

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

    function increment() {
        count++;
    }
</script>

<div>
    <p>Count: {count}</p>
    <p>Double: {double}</p>
    <button onclick={increment}>+1</button>
</div>

TC39 Proposal: Native Signals

The most exciting development is that there's a proposal to add Signals directly to JavaScript through TC39:

Current Proposal

// Possible future native JavaScript syntax
import { Signal } from 'std:signals';

const count = new Signal.State(0);
console.log(count.get()); // 0
count.set(5);

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

Proposal Status

Stage 1 (January 2026):

• Proposal accepted by TC39
• Under active discussion
• Collaboration between Angular, Vue, Solid, Svelte
• Polyfills already available for testing

Performance Benefits

Re-render Comparison

Scenario	React	Signals
1 prop changes	Entire component	Only 1 element
List of 1000 items, 1 changes	Reconciles 1000	Updates 1
Form with 20 fields	20 re-renders	1 update
Animation 60fps	May drop frames	Consistent

Conclusion

Signals represent a natural evolution in how we handle reactivity in JavaScript. Instead of re-rendering entire components, we update only what's necessary. This results in faster, more efficient applications that are easier to reason about.

If you haven't tried Signals yet, this is the perfect time to start. Angular, Vue, Solid, and Svelte already offer excellent production-ready implementations.

Let's go! 🦅