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.

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

Installation

npm i @preact/signals-react

Create a signal

We can create a state(signal) using the signal function, signal function takes default signal(value) as a parameter and returns the Proxy object. Value of signal can be accessed using signal.value the 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…