Introduction to Signals
Signals is a high-performance state management library designed to simplify the writing of business logic in applications, whether they are small or complex. With Signals, managing app updates becomes effortless and speedy. The library focuses on two main objectives: optimizing state updates automatically and integrating seamlessly into popular frameworks like Preact, React, and Svelte. Let’s dive into the features and how Signals makes handling app logic a breeze.
Key Objectives of Signals
-
Ease of Business Logic: Signals aims to streamline the process of writing business logic. Regardless of the complexity of your app, the library ensures that updates remain fast and efficient. It handles optimization of state updates covertly, invoking only the necessary updates.
-
Framework Integration: Signals can integrate into various frameworks as if they were originally a part of them. This seamless integration means developers don't need to use selectors or wrapper functions. When a signal's value changes, the associated components automatically re-render.
You can refer to the announcement post for more insights into the challenges Signals addresses and its origins.
Installation
To get started, Signals can be installed via npm. The installation process varies slightly depending on the framework you are using:
- For core library usage:
npm install @preact/signals-core - For Preact:
npm install @preact/signals - For React:
npm install @preact/signals-react - For Svelte:
npm install @preact/signals-core
Guide to Using Signals
signal(initialValue)
A signal is essentially a container for a value that can change over time. By utilizing the .value property, you can both read and subscribe to changes in a signal.
import { signal } from "@preact/signals-core";
const counter = signal(0);
console.log(counter.value); // Logs: 0
counter.value = 1; // Modifying the signal
signal.peek()
This function is used to read a signal’s previous value without subscribing to it, useful for specific scenarios.
const counter = signal(0);
const effectCount = signal(0);
effect(() => {
console.log(counter.value);
effectCount.value = effectCount.peek() + 1;
});
computed(fn)
computed helps derive new values from existing signals. It re-executes and updates whenever the dependent signals change.
import { signal, computed } from "@preact/signals-core";
const name = signal("Jane");
const surname = signal("Doe");
const fullName = computed(() => name.value + " " + surname.value);
console.log(fullName.value); // Logs: "Jane Doe"
effect(fn)
effect makes an application reactive by subscribing to any signal accessed within its callback function. It reacts automatically to updates.
import { signal, computed, effect } from "@preact/signals-core";
const name = signal("Jane");
const surname = signal("Doe");
const fullName = computed(() => name.value + " " + surname.value);
effect(() => console.log(fullName.value));
name.value = "John"; // Triggers the effect, logs "John Doe"
batch(fn)
This function allows for multiple signal updates in one operation, with changes applied at the end of the callback.
import { signal, computed, effect, batch } from "@preact/signals-core";
const name = signal("Jane");
const surname = signal("Doe");
const fullName = computed(() => name.value + " " + surname.value);
effect(() => console.log(fullName.value));
batch(() => {
name.value = "Foo";
surname.value = "Bar";
}); // Triggers once, logs "Foo Bar"
untracked(fn)
untracked is used to execute a function without creating a subscription to any signals it reads.
const counter = signal(0);
const effectCount = signal(0);
const fn = () => effectCount.value + 1;
effect(() => {
console.log(counter.value);
effectCount.value = untracked(fn);
});
Conclusion
Signals offers a straightforward and efficient way to manage state in modern web applications. Its key features like automatic state optimization, strong integration with popular frameworks, and a comprehensive API contribute to its robustness. Signals is open-source under the MIT license, and further details can be found in the LICENSE file.