React.js state management using signals

A signal is an object that has a value and can be observed for changes. It is similar to a state, but it is not bound to a component. It can be used to share data between components. It updates the components when the signal changes and updates the UI without re-rendering the whole component.

This lets us skip all of the expensive rendering work and jump immediately to any components in the tree that actually access the signal’s value property.

Signals is a performant state management library with two primary goals:

1. Make it as easy as possible to write business logic for small up to complex apps. No matter how complex your logic is, your app updates should stay fast without you needing to think about it. Signals automatically optimize state updates behind the scenes to trigger the fewest updates necessary. They are lazy by default and automatically skip signals that no one listens to.
2. Integrate into frameworks as if they were native built-in primitives. You don't need any selectors, wrapper functions, or anything else. Signals can be accessed directly and your component will automatically re-render when the signal's value changes.

In this article, I’ll be using signals with React.

Installation

Just the core library

npm install @preact/signals-core

If you're using Preact

npm install @preact/signals

If you're using React

npm install @preact/signals-react

If you're using Svelte

npm install @preact/signals-core

Create a signal

A new signal is created through the signal function, which serves as a container for a value that can vary over time. To read the value of a signal or receive updates, you can access its .value property and subscribe to it.

To modify the value of a signal, simply set its .value property. Any changes made to the signal's value will immediately update all associated computations and effects, ensuring the coherence of your application's state.

Counter Component

NOTE: React Hooks can only be called inside the root of the component, Signal can be used outside of a component.

Effect

We don't have to pass dependencies array like the useEffect hook. It'll automatically detect dependencies and call effect only when dependencies change.

Advanced Usage

The computed function enables the consolidation of various signal values into a fresh signal that can be responded to or utilized by additional computeds. When signals accessed within a computed callback undergo alterations, the computed callback is executed again, and its new return value is employed as the computed signal's new value.

Live Demo: Counter Demo

Summary:

Preact Signals is a library that brings reactive programming to Preact, allowing developers to create highly responsive, scalable, and maintainable applications. The library offers three main functions: signal, computed, and effect. The signal function creates a new signal, computed creates a new signal derived from other signals, and effect performs a side effect when a signal changes. By utilizing reactive programming, developers can create applications that are easier to maintain, easier to scale, and more responsive to user interactions.

Thank you for taking the time to read about Preact Signals and reactive programming. If you have any questions or comments, please feel free to leave them below. We would love to hear your thoughts on this topic and help you in any way we can. Let's continue the conversation!

Catch me on YouTube, Github, Twitter, LinkedIn, Medium, Stackblitz, Hashnode, HackerNoon, and Blogspot. I share a lot of content related to these topics, including tutorials, articles, and code samples. Don't hesitate to follow or reach out to me on any of these platforms if you have any questions or want to connect. Thank you for your interest in Preact Signals and happy coding!