Okay, so it is not something that is built in Javascript as of now (November 2024). It is a pattern that is very-well-used in other languages to do some effective and efficient difference calculations.

So one good summer evening, JavaScript developers thought let’s use these Signal Pattern to do our UI Changes. Since, this pattern is very much performant on checking the difference between an old state and a new state, it can be used to check difference between Javascript States and update the DOM in a much fine-grained way.

The above thought gave birth to two things :

1. Proposal to built Signal in Official JavaScript : https://github.com/tc39/proposal-signals, supported by really good contributors (and thousands of other developers)

2. Manual implementation of Signals in multiple UI Frameworks to achieve faster, error-free and simple DOM updates

Signals from Frameworks

The first ones are Qwik and SolidJS. And recently it is used in Svelte 5, Angular and (interestingly enough) Tailwind.

Every framework uses Signals in their own way, but the basic idea remains the same. So let’s explore that basic idea:

1. A Signal is a state that has ability to change all the UI which depends on it. It is called a “effect”

2. One Signal state can be a “computed”/“derived” value of another Signal, so that whenever the orginal signal changes, this computed/derived one will automtically change

3. Signals also has the ability to check the state changes in a much optimised algo using Graph Relationships

4. All the Computed values are memoised by default, so that if the source value has not changed, then there will be no re-computation, hence less UI updates (No more need of useMemo)

5. If there is a change in Signal state, but we are not using that state anywhere, then there will be no re-computation and no UI updates

How it challenges React

Based on the above process, Svelte team introduced Runes, which is by far my most favourite implementation of Signals. Using special symbols (runes), they identify reactive states (signals) and when any of these state changes, the background Signal architecture identifies which are the DOM elements consuming this state, so that it can update only that DOM element. This is called Fine Grain Reactivity.

React, on the other hand, uses two virtual DOMs (copy of actual DOM with old state and updated state) and then compares them with a Diffing Algorithim and then applies a process called Fiber to update the actual DOM efficiently.

Yes! I know, Compared to Fine Grained Reactivity, the React approach feels like a lot more complicated. Because in the React approach, a huge amount of this process are manually written, while Signal is a language pattern that can be easily added into Javascript.

Since all this process of React has been used in Production for Facebook for god knows how many years now, everyone else also puts their faith on this process too. But may be Signals can change that or React will include it once it becomes web-standard.

Further exploration

1. How to have Signals in React : https://www.youtube.com/watch?v=SO8lBVWF2Y8
2. How a Signal and its implementation is written : https://www.youtube.com/watch?v=bUy4xiJ05KY

Thanks for reading this through 🚥