Search...
Log in Create account
Rahul Sharma Rahul Sharma
Posted on Sep 21, 2022 • Updated on Dec 29, 2022
Follow
16 1
17
✔ I’m currently learning about Flutter ✔ Ask me anything
React.js state management using signals
you want, If I'm alive I will answer within seconds 😉 ✔ I
Always try to learn something new & then sleep till it stores in
4 the brain 😎
#react #signals #preact #javascript
LOCATION
Bangalore, India
23 JOINED
Mar 14, 2022
React.js (2 Part Series)
1 useAsync hook with cache More from Rahul Sharma
2 React.js state management using signals What, Why and How Javascript Static Initialization Blocks?
#javascript #webdev #beginners #programming
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
Create an HTTP server using 1 command
bound to a component. It can be used to share data between components. It updates the components when
#webdev #javascript #tutorial #programming
the signal changes and updates the UI without re-rendering the whole component.
Exploring the Power of new.target in JavaScript
#javascript #webdev #beginners #tutorial
DEV Community
🌚 Life is too short to browse
without dark mode
![Image description]
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
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 YouTube, Github, Twitter, LinkedIn, Medium, Stackblitz, Hashnode, HackerNoon, and Blogspot.
React.js (2 Part Series)
1 useAsync hook with cache
2 React.js state management using signals
Top comments (4) Subscribe
Add to the discussion
DuocNgo • Mar 2
hi Rahul, can you use object with signal. thanks in advance.
Reply
Rafael Melo • Mar 4
yes you can, check this section here on docs
Combining multiple updates into one
preactjs.com/guide/v10/signals#usa...
1 like Reply
DuocNgo • Mar 7 • Edited on Mar 7
import React from 'react'
import { signal } from '@preact/signals-react'
function Todos(props) {
const todos = signal([
{ name: '123'},
])
const addToDo = () => {
todos.value = [...todos.value, { name: '123123'}]
}
return (
<div>
<button onClick={() => {
addToDo();
}}>add to do</button>
{
todos.value.map(({ name }, index) => (<div key={index} style={{
fontWeight: 'bold'
}}>{name}</div>))
}
</div>
)
}
export default Todos
i have tried, but my UI didn't update after click add new Todo.
Reply
Rafael Melo • Mar 4
isnt this 1:1 with the preact docs?
preactjs.com/guide/v10/signals#usa...
1 like Reply
Code of Conduct • Report abuse
DEV Community
Visualizing Promises and Async/Await 🤯
☝ Check out this all-time classic DEV post
Read next
Building the largest Notifications Library in the world using ChatGPT, React, and NodeJS 🤯
Nevo David - Feb 13
Setting up authentication in Astro with Prisma and Planetscale
Thomas Ledoux - Feb 26
Building Serverless Applications with React
Kauna Hassan - Feb 25
My VS Code setup
Jatin Sharma - Feb 4
DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey.
Home Listings Podcasts Videos Tags FAQ Forem Shop Sponsors About Contact Guides Software comparisons
Code of Conduct Privacy Policy Terms of use
Built on Forem — the open source software that powers DEV and other inclusive communities.
Made with love and Ruby on Rails. DEV Community © 2016 - 2023.
