DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

1

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:

Build seamlessly, securely, and flexibly with MongoDB Atlas. Try free.

Build seamlessly, securely, and flexibly with MongoDB Atlas. Try free.

MongoDB Atlas lets you build and run modern apps in 125+ regions across AWS, Azure, and Google Cloud. Multi-cloud clusters distribute data seamlessly and auto-failover between providers for high availability and flexibility. Start free!

Learn More

Top comments (0)

Gen AI apps are built with MongoDB Atlas

Gen AI apps are built with MongoDB Atlas

MongoDB Atlas is the developer-friendly database for building, scaling, and running gen AI & LLM appsโ€”no separate vector DB needed. Enjoy native vector search, 115+ regions, and flexible document modeling. Build AI faster, all in one place.

Start Free

๐Ÿ‘‹ Kindness is contagious

Explore this practical breakdown on DEVโ€™s open platform, where developers from every background come together to push boundaries. No matter your experience, your viewpoint enriches the conversation.

Dropping a simple โ€œthank youโ€ or question in the comments goes a long way in supporting authorsโ€”your feedback helps ideas evolve.

At DEV, shared discovery drives progress and builds lasting bonds. If this post resonated, a quick nod of appreciation can make all the difference.

Okay