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 access the signal's value property.
In this article, I'll be using signals with React.
Installation
npm i @preact/signals-react
Create a signal
We can create state(signal) using signal function, signal function takes default signal(value) as an parameter and returns Proxy object. The value of the signal can be accessed using the signal.value property. We can also set the value of the signal using signal.value = newValue.
import { signal } from "@preact/signals-react";
const count = signal(0);
Counter Component
import React from "react";
import { signal } from "@preact/signals-react";
const count = signal(0);
const Counter = () => <button onClick={() => count.value++}>{count}</button>;
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.
import React from "react";
import { signal, effect } from "@preact/signals-react";
const count = signal(0);
const Counter = () => {
effect(() => console.log(count.value));
return <button onClick={() => count.value++}>{count}</button>;
};
Advanced Usage
When working with signals outside of the component tree, you may have noticed that computed signals don't re-compute unless you actively read their value.
const count = signal(0);
const double = computed(() => count.value * 2);
const Counter = () => {
effect(() => console.log(count.value));
return (
<div>
<h1>{double}</h1>
<button onClick={() => count.value++}>{count}</button>
</div>
);
};
Live Demo: Counter Demo
Thank you for reading 😊
Got any questions or additional? please leave a comment.
Must Read If you haven't
Catch me on
Youtube Github LinkedIn Medium Stackblitz Hashnode HackerNoon
hi Rahul, can you use object with signal. thanks in advance.