Signals: The New Reactivity Standard Dominating JavaScript

Hello HaWkers, a significant change is happening in the JavaScript ecosystem in 2026. Signals, the reactivity primitive that was born in SolidJS, is now the standard adopted by Vue, Angular, Svelte and is being proposed for inclusion in native JavaScript through TC39.

Have you ever wondered why so many frameworks are converging to the same reactivity model?

What Are Signals

Understanding the fundamental concept.

Simple Definition

Signals are reactive containers for values:

Main characteristics:

Store a value
Automatically notify when they change
Allow derivations (computed values)
More granular than traditional state

Analogy:
Think of Signals like cells in a spreadsheet. When you change a cell, all formulas that depend on it update automatically.

Why Signals Matter

The problem they solve:

Traditional reactivity (React):

Re-renders entire components
Needs manual memoization
Virtual DOM for diff
Memory overhead

Reactivity with Signals:

Updates only what changed
Automatic and granular reactivity
No Virtual DOM needed
Superior performance

How Signals Work

The mechanics behind the magic.

Anatomy of a Signal

Basic structure:

// Creating a simple signal
import { signal, computed, effect } from '@preact/signals-core';

// Basic signal - reactive container
const count = signal(0);

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

// Modifying the value
count.value = 1;

// Computed - derived value
const doubled = computed(() => count.value * 2);

console.log(doubled.value); // 2

// Effect - reactive side effect
effect(() => {
  console.log(`Count is now: ${count.value}`);
});

// When count changes, effect runs automatically
count.value = 5; // Logs: "Count is now: 5"

The Dependency Graph

How signals connect:

// Signal system with dependencies
const firstName = signal('Maria');
const lastName = signal('Silva');

// Computed that depends on two signals
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});

// Computed that depends on another computed
const greeting = computed(() => {
  return `Hello, ${fullName.value}!`;
});

// Effect that observes the complete graph
effect(() => {
  document.title = greeting.value;
});

// Changing any signal propagates the change
firstName.value = 'Ana';
// Automatically: fullName = "Ana Silva"
// Automatically: greeting = "Hello, Ana Silva!"
// Automatically: document.title updated

Granular Reactivity

The crucial difference:

// Example: Todo list with signals

const todos = signal([
  { id: 1, text: 'Study Signals', done: false },
  { id: 2, text: 'Create project', done: false },
  { id: 3, text: 'Publish article', done: true },
]);

// Computed for pending tasks
const pendingCount = computed(() => {
  return todos.value.filter(t => !t.done).length;
});

// Computed for completed tasks
const completedCount = computed(() => {
  return todos.value.filter(t => t.done).length;
});

// Function to mark as done
function toggleTodo(id) {
  todos.value = todos.value.map(todo =>
    todo.id === id
      ? { ...todo, done: !todo.done }
      : todo
  );
}

// Only counters that changed are recalculated
toggleTodo(1);
// pendingCount: 2 -> 1 (recalculated)
// completedCount: 1 -> 2 (recalculated)

Signals in Modern Frameworks

How each framework implements.

Vue 3 - Composition API

Vue uses Signals internally:

// Vue 3 with Composition API (uses signals under the hood)
import { ref, computed, watchEffect } from 'vue';

export default {
  setup() {
    // ref() is a signal
    const count = ref(0);

    // computed() is a derived signal
    const doubled = computed(() => count.value * 2);

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

    function increment() {
      count.value++;
    }

    return { count, doubled, increment };
  }
};

Angular 16+ - Native Signals

Angular officially adopted signals:

// Angular with Signals (16+)
import { Component, signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Count: {{ count() }}</p>
      <p>Doubled: {{ doubled() }}</p>
      <button (click)="increment()">+1</button>
    </div>
  `
})
export class CounterComponent {
  // Signal with initial value
  count = signal(0);

  // Computed signal
  doubled = computed(() => this.count() * 2);

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

  increment() {
    // Two ways to update
    this.count.set(this.count() + 1);
    // or
    this.count.update(c => c + 1);
  }
}

SolidJS - The Pioneer

Where it all started:

// SolidJS - Native signals from the start
import { createSignal, createEffect, createMemo } from 'solid-js';

function Counter() {
  // createSignal returns [getter, setter]
  const [count, setCount] = createSignal(0);

  // createMemo is Solid's computed
  const doubled = createMemo(() => count() * 2);

  // createEffect for side effects
  createEffect(() => {
    console.log(`Count is: ${count()}`);
  });

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

TC39 Proposal for Native JavaScript

Signals may enter the language.

Current Status

The proposal at TC39:

Situation in 2026:

Stage 1 approved
Active discussions for Stage 2
Support from multiple vendors
Experimental implementation in progress

What it means:

Signals may be native to JavaScript
Interoperability between frameworks
Even better performance
Standardized API

Proposed API

How it would look in native JavaScript:

// Proposed API for native JavaScript (TC39)

// Creating a native Signal
const count = new Signal.State(0);

// Reading value
console.log(count.get()); // 0

// Modifying value
count.set(1);

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

// Watcher (similar to effect)
const watcher = new Signal.subtle.Watcher(() => {
  console.log('Dependencies changed!');
});

watcher.watch(count);

// Framework usage would be simplified
// Frameworks could share signals between them

Benefits of Standardization

Why this matters:

For developers:

One API to learn
Signals work the same in any framework
Less framework lock-in
Easier migrations

For the ecosystem:

Universal signal libraries
Better tooling and debugging
Performance optimized by engine
Less framework code

Comparing Reactivity Approaches

Signals vs other options.

Signals vs useState (React)

Fundamental differences:

Aspect	useState	Signals
Granularity	Component	Individual value
Re-render	Entire component	Only where used
Memoization	Manual (useMemo)	Automatic
Batching	Automatic	Automatic
Debuggability	DevTools	Visible graph

Signals vs RxJS

Two reactive approaches:

// RxJS - Event streams
import { BehaviorSubject, map } from 'rxjs';

const count$ = new BehaviorSubject(0);
const doubled$ = count$.pipe(map(x => x * 2));

doubled$.subscribe(value => console.log(value));
count$.next(1);

// Signals - Reactive values
const count = signal(0);
const doubled = computed(() => count.value * 2);

effect(() => console.log(doubled.value));
count.value = 1;

When to use each:

RxJS: Complex async events, data streams
Signals: UI state, synchronous reactive values

Advanced Patterns with Signals

Professional techniques.

Store Pattern

Organizing global state:

// Store pattern with signals
import { signal, computed } from '@preact/signals-core';

function createStore() {
  // Private state
  const _user = signal(null);
  const _cart = signal([]);
  const _loading = signal(false);

  // Public computed
  const isLoggedIn = computed(() => _user.value !== null);
  const cartTotal = computed(() =>
    _cart.value.reduce((sum, item) => sum + item.price, 0)
  );
  const cartCount = computed(() => _cart.value.length);

  // Actions
  async function login(credentials) {
    _loading.value = true;
    try {
      const user = await api.login(credentials);
      _user.value = user;
    } finally {
      _loading.value = false;
    }
  }

  function addToCart(product) {
    _cart.value = [..._cart.value, product];
  }

  function removeFromCart(productId) {
    _cart.value = _cart.value.filter(p => p.id !== productId);
  }

  return {
    // State (readonly)
    user: computed(() => _user.value),
    cart: computed(() => _cart.value),
    loading: computed(() => _loading.value),

    // Computed
    isLoggedIn,
    cartTotal,
    cartCount,

    // Actions
    login,
    addToCart,
    removeFromCart,
  };
}

export const store = createStore();

Signals with TypeScript

Strong typing:

// Signals with full TypeScript
import { signal, computed, Signal, ReadonlySignal } from '@preact/signals-core';

interface User {
  id: string;
  name: string;
  email: string;
}

interface Todo {
  id: string;
  text: string;
  done: boolean;
}

// Typed signal
const currentUser: Signal<User | null> = signal(null);

// Array of signals
const todos: Signal<Todo[]> = signal([]);

// Typed computed
const pendingTodos: ReadonlySignal<Todo[]> = computed(() =>
  todos.value.filter(t => !t.done)
);

// Typed function that uses signals
function addTodo(text: string): void {
  const newTodo: Todo = {
    id: crypto.randomUUID(),
    text,
    done: false,
  };
  todos.value = [...todos.value, newTodo];
}

Performance: Signals vs Virtual DOM

The numbers speak.

Comparative Benchmarks

Real performance tests:

Scenario: List with 10,000 items, updating 1 item

Framework	Update Time	Memory
React (VDOM)	45ms	12MB
Vue 3 (Signals)	8ms	6MB
Solid (Signals)	3ms	4MB
Svelte 5 (Signals)	5ms	5MB

Why signals are faster:

No Virtual DOM diff
Direct DOM update
Less garbage collection
Optimized dependency graph

When VDOM Still Makes Sense

Signals aren't always better:

VDOM works well for:

Components that change completely
Server-side rendering
Existing React ecosystem
Team already familiar

Signals shine in:

Frequent granular updates
Data-intensive applications
Real-time dashboards
Mobile/low power

Migrating to Signals

Practical adoption guide.

Incremental Strategy

Recommended steps:

Learn the concepts in a small project
Experiment in isolated components
Migrate stores to signals first
Refactor components gradually
Monitor performance before/after

Common Pitfalls

What to avoid:

// WRONG: Destructuring the value loses reactivity
const { value } = count; // value is not reactive!

// CORRECT: Always access .value when needed
const currentCount = count.value; // reactive

// WRONG: Mutating arrays/objects directly
todos.value.push(newTodo); // Doesn't trigger update!

// CORRECT: Create new reference
todos.value = [...todos.value, newTodo]; // Triggers update

// WRONG: Effects with untracked dependencies
effect(() => {
  const id = someNonSignalVar; // Not tracked!
  fetchData(id);
});

// CORRECT: Use signals for all dependencies
const idSignal = signal(someId);
effect(() => {
  fetchData(idSignal.value); // Tracked correctly
});

The JavaScript ecosystem's convergence to Signals represents an industry maturity in frontend reactivity. In 2026, understanding Signals is no longer optional - it's fundamental for any modern frontend developer.

If you want to understand how these changes affect your career, I recommend checking out another article: The Skills Every Developer Needs to Master in 2026 where you will discover what the market is demanding.

Let's go! 🦅

🎯 Join Developers Who Are Evolving

Thousands of developers already use our material to accelerate their studies and achieve better positions in the market.

Why invest in structured knowledge?

Learning in an organized way with practical examples makes all the difference in your journey as a developer.

Start now:

1x of $4.90 on card
or $4.90 at sight

🚀 Access Complete Guide

"Excellent material for those who want to go deeper!" - John, Developer