Create signals in React with 5 lines of code !

Signals are creating a buzz in the frontend ecosystem because of being simple to create, consume and understand. While frameworks like Preact, Qwik, Svelte and Angular(?) have implemented them, React seems to avoid them.

What are signals

As per Preact documentation, Signals are reactive primitives for managing application state. In React, creating and updating state is a "weird" process. You useState and destructure it. Then, to updating state you must use setState() which must receive a completely new object for re-render to happen.

With signals, you can directly modify the state value to cause re-renders. Here is a 5 line implementation of such a feature with custom hook,

function useSignal(init) {
  const [state, setState] = useState(init);
  return { 
    get mut() { return state },
    set mut(_new) { setState(_new) } //I love closures !!!
  }
}

function Counter() {
  const count = useSignal(0);
  return (<>
   <div>Counter: {count.mut}</div>
   <button onClick={() => ++count.mut}>Increment</button>
  </>);
}

Clean and Elegant right ? This new mental modal of mutation causes re-render makes our code more readable and concise, which Svelte.js is also based on.

But there is a caveat, this works for primitives. If you have an array / object state value and try to mutate its individual property, it won't trigger the setter. You have to explicitly assign the new value (like you have to do in Svelte.js).

//display 0123.... progressively with each click of button

export function Counter() {
  const count = useSignal([0]);
  const push = () => 
    count.mut = count.mut.concat(count.mut.length)

  return (<>
    <div>Counter: {count.mut}</div>
    <button onClick={push}>Increment</button>
</>);
}

For me, this is still a better mental model than default state-setState paradigm. I am pretty sure some Javascript wizard can use Proxy/Reflect to trigger setter for even changing individual indices of array. Do comment if you know how to. :)