Simple JavaScript Signal Concept

🔎 What Are Signals?

Signals are basic units of data that can automatically alert functions or computations when the data they hold changes.

This alerting capability allows parts of a system to automatically and immediately update when the data changes, making the system feel dynamic and real-time.

This solves the problem of updating something visually when some data changes behind the scenes.

When data changes, a function is triggered to update a specific element on the DOM.

An example is here: https://stackblitz.com/edit/vitejs-vite-yh3tpb?file=signals.js

🚀 How Do Signals Work?

We defined a variable mySignal to hold our reactive signal.

We call the subscribe method on our returned and bind a function that will be called whenever our value setter is called, which will update the DOM.

Now whenever we set the value of our signal, our subscriber is notified, and the DOM is updated!

At the root, this is what's happening with signals. Of course, frameworks implement many additional features, such as derives and effects. In Angular's case, we have Angular Signals that use further improvements to performance.

Angular Signals details are here: https://angular.io/guide/signals

I hope you found it useful. Thanks for reading. 🙏

Let's get connected! You can find me on:

• Medium: https://medium.com/@nhannguyendevjs/
• Dev: https://dev.to/nhannguyendevjs/
• Hashnode: https://nhannguyen.hashnode.dev/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (formerly Twitter): https://twitter.com/nhannguyendevjs/
• Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs