DEV Community

Ishan Parlikar
Ishan Parlikar

Posted on

Introducing Signals in React πŸš₯

We have all heard/used states in React. It is a way to observe a value and its change to update the UI accordingly without triggering full page refresh. It is very useful but it comes at a cost, State change triggers re-rendering of the component, Which can hit the performance.

Preact

Preact is a 3kb alternative library which uses same API as React. But since its smaller, it ships less code to the browser.
Recently, They have announced a new package which is available to install react as well called Signals.
Docs

According to Docs:

What makes Signals unique is that state changes automatically update components and UI in the most efficient way possible. Automatic state binding and dependency tracking allows Signals to provide excellent ergonomics and productivity while eliminating the most common state management footguns.

What signal does is, It is a object containing a property .value, Once defined that signal/object remains the same but its value can change and when it does it notifies this change so that reference to that value can be updated.

Couple of things that make this interesting are,

  1. Signals do not trigger re-renders of whole component, instead they just update the value in place.
  2. They can be defined globally and imported in other components, So whenever value for specific signal changes, It can update the UI with the value throughout the application.

To Install Signal in React

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

Simple Use case

import {signal} from '@preact/signals-react'

//create a signal
const count = signal(0)

const App = () =>{
 return(
   <>
     <p>{count.value}</p>
   </>
)}
Enter fullscreen mode Exit fullscreen mode

Preact signal Github

So try it and let me know what you guys think.

Cheers and Happy Coding πŸ»πŸ‘©β€πŸ’»

Top comments (5)

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

So Jotai.

Collapse
 
ishan_parlikar profile image
Ishan Parlikar

I have heard about Jotai. Its a state management library. But I am not sure about the re-rendering thing.

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

It takes care of that, it rerenders only components which atom value changes

Thread Thread
 
ishan_parlikar profile image
Ishan Parlikar

Ohh. I did not know that.
Good to know. I will check this
Thank you

Collapse
 
remy90 profile image
Remy

If atoms trigger a rerender then it’s not the same as jotai. Add I understand it, react signals don’t trigger any rerendering