Signals: The Future of Reactive Programming in JavaScript

Signals are a powerful data type shaping the future of reactive programming in JavaScript. At its core, a Signal represents a value that can change over time and automatically manages calculations dependent on these changes. Signals provide a mechanism that enables unidirectional data flow, simplifies state management, and enhances application performance.

The role of Signals in reactive programming is critical for creating dynamic user interfaces. By simplifying complex state management, Signals allow developers to focus on business logic. They automate

challenging tasks such as storing values, performing calculations, invalidating, and efficiently communicating to the view layer.

The historical development of Signals began with Knockout.js in 2010 and has since been adopted and developed by various JavaScript frameworks. In recent years, almost all modern JavaScript libraries and frameworks include Signal-like structures in some form. This widespread use has accelerated the standardization process of Signals, leading to a proposal in TC39.

Let's understand this concept through a simple counter example, comparing vanilla JavaScript with a Signal-based approach:

(A counter implementation in vanilla JavaScript)

let counter = 0;
const setCounter = (value) => {
  counter = value;
  render();
};
const isEven = () => (counter & 1) == 0;
const oddEven = () => isEven() ? "even" : "odd";
const render = () => element.innerText = oddEven();
setInterval(() => setCounter(counter + 1), 1000);

This approach has several problems:

• Complex Setup: The counter setup leads to unnecessary code clutter and repetition.
• Tight Coupling: The counter state is tightly coupled with the render system.
• Unnecessary Calculations: Calculations and renders occur even when the result doesn't change.
• Difficult Independent Updates: Managing updates for different UI parts is challenging.
• Problematic Independent Dependencies: Parts of the UI directly interacting with the counter, even if they only depend on derived values.

(Signal-based Counter Example)

const counter = new Signal.State(0);
const isEven = new Signal.Computed(() => (counter.get() & 1) == 0);
const parity = new Signal.Computed(() => isEven.get() ? "even" : "odd");
// A library or framework defines effects based on other Signal primitives
declare function effect(cb: () => void): (() => void);
effect(() => element.innerText = parity.get());
// Simulate external updates to counter...
setInterval(() => counter.set(counter.get() + 1), 1000);

Key advantages of the Signal-based approach:

• Simplified Code: Eliminates complex code structures around the counter variable.
• Unified API: Uses a unified API for managing values, calculations, and side effects.
• No Circular References: Avoids cyclical reference problems between the counter and render process.
• Automatic Subscription Management: No need for manual subscriptions or complex state tracking.
• Control Over Side Effects: Provides control over the timing and scheduling of side effects.

Signals offer more than what's apparent on the surface of the API:

• Automatic Dependency Tracking: Computed Signals automatically discover their dependencies.
• Lazy Evaluation: Calculations are only performed when their values are explicitly requested.
• Memoization: Computed Signals cache their last values, avoiding unnecessary recalculations.

The Signal system uses a combination of push and pull mechanisms, making it highly efficient.

When the value of a State Signal changes, this change is "pushed" to dependent Computed Signals and Effects.

This ensures that dependent elements are aware of the change.

Computed Signals are not recalculated until their values are read.

When a value is requested, the current value is "pulled".

When a State Signal changes, dependent Computed Signals are marked as "dirty".

Effects are triggered immediately (push).

Computed Signals are not recalculated until their values are read (lazy pull).

This model prevents unnecessary calculations and efficiently uses system resources.

Lazy Evaluation is the foundation of how Computed Signals work.

Properties:

Computed Signals are not calculated until their values are actually needed.

Calculation occurs when the value is read (for example, when .get() is called).

Advantages:

• Prevents unnecessary calculations.
• Conserves system resources.
• Particularly useful in complex, nested calculations.

const a = new Signal.State(5);
const b = new Signal.State(10);
const sum = new Signal.Computed(() => a.get() + b.get());
a.set(7); // sum is not recalculated yet
console.log(sum.get()); // Now it's calculated and returns 17

Glitch-free execution guarantees that the Signal system maintains a consistent state.

What Does It Mean?

The system always remains in a consistent state.

Intermediate values or temporary inconsistent states are not observed.

How Is It Achieved?

Topological Sorting: The dependency graph ensures updates are made in the correct order.

Batch Updates: Changes are applied in batches.

const a = new Signal.State(1);
const b = new Signal.Computed(() => a.get() * 2);
const c = new Signal.Computed(() => a.get() + b.get());
a.set(2);
console.log(c.get()); // Always returns 6, never an intermediate value like 5 (1 + 4)

Memoization is the caching of computation results and prevention of unnecessary recalculations.

When a Computed Signal is calculated, the result is cached.

As long as dependencies don't change, subsequent reads use the cache.

If any dependency changes, the cache is invalidated, and recalculation occurs.

Advantages:

Provides performance improvement.

Especially useful for costly calculations.

Conserves system resources.

const heavyComputation = new Signal.Computed(() => {
  console.log("Calculating...");
  return expensiveFunction(a.get(), b.get());
});
console.log(heavyComputation.get()); // Prints "Calculating..." and returns the result
console.log(heavyComputation.get()); // Only returns the result, doesn't recalculate
a.set(newValue); // Dependency changed
console.log(heavyComputation.get()); // Prints "Calculating..." again and returns the new result

These four principles work together to ensure that the Signal system is efficient, consistent, and performant. The Push-Pull model and Lazy Evaluation prevent unnecessary operations, Glitch-free Execution guarantees consistency, and Memoization improves performance. These principles explain why Signal is a powerful solution for complex state management and UI updates in modern web applications.