DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Rahul Sharma
Rahul Sharma

Posted on • Updated on

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 access the signal's value property.

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

Installation

npm i @preact/signals-react
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Counter Component

import React from "react";
import { signal } from "@preact/signals-react";

const count = signal(0);
const Counter = () => <button onClick={() => count.value++}>{count}</button>;
Enter fullscreen mode Exit fullscreen mode
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>;
};
Enter fullscreen mode Exit fullscreen mode

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

Live Demo: Counter Demo


Thank you for reading 😊

Got any questions or additional? please leave a comment.


Must Read If you haven't
useAsync hook with cache
Getting started with SolidJs – A Beginner's Guide
React best practices and patterns to reduce code
3 steps to create custom state management library with React and Context API
How to cancel Javascript API request with AbortController
13 Typescript Utility: A Cheat Sheet for Developer

More content at Dev.to.
Catch me on Github, Twitter, LinkedIn, Medium, and Stackblitz.

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post