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:

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

šŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay