React-Hook-Signal is a tiny library, less than 1kb. It helps you integrate Signal with your React components easily.

Installation

1npm install react-hook-signal signal-polyfill

What are Signals?

The TC39 Proposal for Signals in JavaScript aims to establish a mechanism for components to communicate effectively. This proposal includes a polyfill for prototyping purposes.

Understanding Signals

• Refer to https://eisenbergeffect.medium.com/a-tc39-proposal-for-signals-f0bedd37a335 for detailed explanation.
• Explore the proposal repository: https://github.com/proposal-signals/proposal-signals

Once adopted, JavaScript will have a native signaling system, referred to as Signal throughout this guide.

How signal can efficiently re-render react component

In React components, re-rendering starts at the component's beginning and extends to the end of the JSX element. Signal usage allows precise re-rendering, boosting performance and simplifying development without the need for memoization or useCallback functions.

Why choose React-Hook-Signal?

• It's straightforward: Just React and Native Signal, no extra babel plugin needed.
• Enjoy full TypeScript support for an improved Developer Experience.
• Flexibility is key: Opt-in for integration in your React project, seamlessly blending state and signal.
• It's incredibly lightweight, clocking in at less than 1kb

Steps to Integrate Signals with React

STEP 1: Rendering Signal Values:

• Utilize notifiable components provided by react-hook-signal.
• notifiable components accept standard HTML attributes, Signal, and Lambda for detecting dependency changes.

Example:

1// Global.tsx
2import {Signal} from "signal-polyfill";
3import {JSXAttribute} from "react-hook-signal";
4
5export const count = new Signal.State(0)
6export const renderCount = new Signal.Computed(() => {
7    return <div>Count {count.get()}</div>
8})
9

The fastest way to integrate these Signals is to use the notifiable components.

1import {count,renderCount} from "./GlobalSignals.tsx";
2// here we are importing react-hook-signal:notifiable
3import {notifiable} from "react-hook-signal";
4
5
6export function App() {
7    return <>
8    
9        {/* When user click button it will update the state */}
10        <button onClick={() => count.set(count.get() + 1)}>Click here</button>
11    
12        {/* Following line will get auto update when user click button*/}
13        <notifiable.div>{renderCount}</notifiable.div>
14    </>
15}

notifiable component attributes is not only capable of accepting the Signal type but also can receive Lambda

Lambda is a callback that's able to listen for changes in the signals it depends on.

1import {count} from "./GlobalSignals.tsx";
2import {notifiable} from "react-hook-signal";
3
4
5export function App() {
6    return <>
7    
8        {/* When user click button it will update the state */}
9        <button onClick={() => count.set(count.get() + 1)}>Click here</button>
10    
11        {/* Following line will get auto update when user click button*/}
12        <notifiable.div>{() => {
13            return <div>Count {count.get()}</div>
14        }}</notifiable.div>
15    </>
16}

STEP 2: Observing Signal Changes

• Use the useSignalEffect hook to listen for changes in Signal.
• This hook accepts a callback that reads the final signal value and can optionally return a cleanup function.

Important Note:

• useSignalEffect doesn't automatically re-render the component. Use React.useState to trigger a re-render.

Example:

1import {count} from "./GlobalSignals.tsx";
2import {useSignalEffect} from "react-hook-signal";
3import {useState} from "react";
4
5export function App() {
6    const [countState,setCountState] = useState(count.get())
7    
8    useSignalEffect(() => {
9        // Here, within the useSignalEffect hook, I can listen for updates on any Signal.State or Signal.Computed
10        setCountState(count.get())
11    })
12    return <div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
13        {/* When user click button it will update the state */}
14        <button onClick={() => count.set(count.get() + 1)}>Click here</button>
15
16        {/* Following line will be updated because of countState updated*/}
17        <div>{countState}</div>
18    </div>
19}
20

STEP 3: Creating Signals in React Components:

• useSignal is a hook that creates Signal.State, and useComputed is a hook that creates Signal.Computed.

• These hooks generate signals that are linked to the component's lifecycle.

• To create a Signal.State, simply provide a constant value as a parameter when calling useSignal.

• To create a Signal.Computed,simply provide a Lambda that returns the result of a dynamic computation.

Example :

1import {notifiable, useSignal, useComputed} from "react-hook-signal";
2
3export function App() {
4    
5    // creating Signal.State count
6    const count = useSignal(0);
7    
8    // creating Signal.Computed countString
9    const countString = useComputed(() => (count.get() * 2).toString());
10    
11    // creating Signal.Computed style
12    const style = useComputed(() => {
13        const isEven = count.get() % 2 === 0;
14        return {
15            background: isEven ? 'white' : 'black',
16            color: isEven ? 'black' : 'white'
17        }
18    })
19
20    // creating Signal.Computed text
21    const text = useComputed(() => {
22        const isWhite = style.get().background === 'white'
23        return <div>{isWhite ? 'Background is White' : 'Background is Black'}</div>
24    })
25
26    return <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
27        {/* When user click button it will update the state */}
28        <button onClick={() => count.set(count.get() + 1)}>Click here</button>
29
30        {/* Following line will never get auto update*/}
31        <div>{countString.get()}</div>
32
33        {/* Following line will get auto update when user click button*/}
34        <notifiable.div>{countString}</notifiable.div>
35
36        {/* Following line will get auto update when user click button*/}
37        <notifiable.div style={style}>{text}</notifiable.div>
38    </div>
39}
40

STEP 4: Encapsulate any Component with a Notifiable :

• Use Notifiable component to wrap any React Functional or Class Component
• A React component encapsulated within the Notifiable component will inherently enable its properties and children to utilize Lambda expressions or Signals seamlessly

Example :

1import {Notifiable} from "react-hook-signal";
2
3export function App() {
4    const count = useSignal(0);
5    
6    return <div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
7        {/* When user click button it will update the state */}
8        <button onClick={() => count.set(count.get() + 1)}>Click here</button>
9
10        {/* Following line will be updated because of count updated*/}
11        <Notifiable component={MyComponent} title={() => {
12            return count.get() + ' Times'
13        }}></Notifiable>
14                    
15    </div>
16}
17
18function MyComponent(props:{title:string}){
19    return <div>Here is the title {props.title}</div>
20}

Summary

The integration of Signal into the React application can be done in various ways tailored to the needs and complexity of the app.