Signals in JavaScript: The New Era of Reactivity Transforming Frameworks in 2026

Hello HaWkers, if you follow the JavaScript ecosystem, youve probably noticed a clear trend: Signals are everywhere. Angular, Vue, Solid, Svelte, and even proposals for ECMAScript itself are adopting this concept.

But what exactly are Signals? Why are they replacing other state management approaches? And more importantly: how can you leverage this trend in your career?

What Are Signals

Signals are reactive primitives that represent a value that can change over time. When the value changes, anything that depends on it is automatically updated.

The Basic Idea

// Basic Signals concept

// Creating a signal
const counter = signal(0);

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

// Updating the value
counter.set(1);
console.log(counter()); // 1

// Computing derived values
const double = computed(() => counter() * 2);
console.log(double()); // 2

// Reacting to changes
effect(() => {
  console.log(`Counter changed to: ${counter()}`);
});

counter.set(5);
// Console: "Counter changed to: 5"

Why Signals Are Different

The great advantage of Signals is fine-grained reactivity. Only the parts that actually depend on a value are updated when it changes.

// Comparison: Traditional state vs Signals

// ❌ Traditional approach (complete re-render)
function TraditionalComponent() {
  const [state, setState] = useState({
    name: 'Ana',
    age: 25,
    email: 'ana@email.com'
  });

  // Any change re-renders EVERYTHING
  const updateName = () => {
    setState({ ...state, name: 'Bruno' });
    // Entire component re-renders
  };
}

// ✅ Signals approach (granular update)
function SignalsComponent() {
  const name = signal('Ana');
  const age = signal(25);
  const email = signal('ana@email.com');

  // Only what uses 'name' is updated
  const updateName = () => {
    name.set('Bruno');
    // Only elements reading 'name' are updated
  };
}

How Frameworks Implement Signals

Each framework has its own implementation, but the concept is similar.

Vue 3 - Reactive and Ref

Vue was already using concepts similar to Signals since version 3:

// Vue 3 - Reactive system

import { ref, computed, watchEffect } from 'vue';

// ref is Vues signal
const counter = ref(0);

// computed is similar to signals computed
const double = computed(() => counter.value * 2);

// watchEffect is similar to effect
watchEffect(() => {
  console.log(`Counter: ${counter.value}`);
});

// Updating
counter.value++;

Angular 16+ - Native Signals

Angular officially adopted Signals in version 16:

// Angular Signals

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

@Component({
  template: `
    <button (click)="increment()">
      Counter: {{ counter() }}
    </button>
    <p>Double: {{ double() }}</p>
  `
})
export class CounterComponent {
  counter = signal(0);
  double = computed(() => this.counter() * 2);

  constructor() {
    effect(() => {
      console.log(`Current value: ${this.counter()}`);
    });
  }

  increment() {
    this.counter.update(v => v + 1);
  }
}

SolidJS - Signals From the Start

SolidJS was built with Signals as its foundation:

// SolidJS - Native signals

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

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

  createEffect(() => {
    console.log(`Counter: ${counter()}`);
  });

  return (
    <button onClick={() => setCounter(c => c + 1)}>
      Counter: {counter()} (Double: {double()})
    </button>
  );
}

The TC39 Proposal For Native Signals

There is an active proposal at TC39 to add Signals to JavaScript itself:

What the Proposal Includes

// TC39 Proposal - Native Signals in JavaScript

// Create a signal
const counter = new Signal.State(0);

// Read and write
console.log(counter.get()); // 0
counter.set(5);

// Computed values
const double = new Signal.Computed(() => counter.get() * 2);

// The API is still being discussed and may change

Proposal Status

Aspect	Status
Stage	Stage 1
Champions	Rob Eisenberg, Daniel Ehrenberg
Goal	Standardize reactive primitives
Implementation	Under discussion

The proposal is in early stage, but has support from authors of several frameworks.

Practical Benefits of Signals

1. Superior Performance

// Signals update only whats necessary

const users = signal([
  { id: 1, name: 'Ana', online: true },
  { id: 2, name: 'Bruno', online: false },
  { id: 3, name: 'Carlos', online: true }
]);

const onlineUsers = computed(() =>
  users().filter(u => u.online)
);

// When users changes, only 'onlineUsers' is recalculated
// And only elements using 'onlineUsers' are re-rendered

2. Automatic Dependency Tracking

// No need to manually declare dependencies

const price = signal(100);
const quantity = signal(2);
const discount = signal(0.1);

// Dependencies are automatically tracked
const total = computed(() => {
  const subtotal = price() * quantity();
  return subtotal - (subtotal * discount());
});

// 'total' knows it depends on price, quantity and discount
// When any changes, total is recalculated

3. Cleaner Code

// Signals eliminate boilerplate

// ❌ Before (useState + useEffect)
function Component() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchData()
      .then(d => { setData(d); setLoading(false); })
      .catch(e => { setError(e); setLoading(false); });
  }, []);

  // ...
}

// ✅ After (with Signals and resources)
function Component() {
  const data = createResource(fetchData);
  // loading and error are automatically derived
}

When to Use Signals

Good Use Cases

UI State: Forms, toggles, modals
Derived data: Filters, sorting, aggregations
Shared state: Data between components
Animations: Frequently changing values

Cases Where Signals May Not Be Ideal

Complex state with many transitions: Redux/XState may be better
State history: Undo/redo requires specific approaches
Server state: React Query/TanStack Query are more suitable

The Future of Reactivity in JavaScript

Trends For 2026 and Beyond

API Convergence:

Frameworks are aligning their signals APIs
The TC39 proposal may unify syntax
Migration between frameworks will become easier

Fine-Grained Reactivity as Default:

Complete re-renders will be a thing of the past
Performance will be the default, not the exception
Less manual optimization needed

Compiler Integration:

Svelte 5 already compiles signals to optimized code
Other frameworks will follow suit
Smaller and faster bundles

What to Learn Now

If you want to prepare for this trend:

Understand the concept: Signals, computed, effect
Practice in a framework: SolidJS is great for learning
Follow the TC39 proposal: Understand the standard direction
Compare approaches: See how each framework implements

Conclusion

Signals represent a fundamental shift in how we think about state and reactivity in JavaScript. The massive adoption by frameworks like Angular, Vue, and Solid shows that this is not a passing fad, but the future of frontend development.

If you havent explored Signals yet, now is the time. The learning curve is gentle, and the benefits in performance and code clarity are significant.

The JavaScript ecosystem continues to evolve, and Signals are one of the most important evolutions of recent years. Developers who master this concept will be well positioned for the future.

If you want to understand more about JavaScript trends, I recommend the article Vanilla JavaScript Is Back where I explore how developers are rethinking framework usage.

Lets 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