Signals in React

Preact is a fast 3 kB alternative to React with the same API. The main difference between Preact and React is that Preact doesn’t implement a synthetic event system. Last September, the Preact team introduced signals, which are a cleaner and more performant way of expressing state. They are similar to refs in Vue. The Preact team made signals available in React, so you can benefit from them even if you’re not ready to switch to Preact.

In essence, a signal is just an object with a value property. Accessing a signal’s value property within a component means that the component will automatically update when the signal’s value changes. Here is a simple <Counter /> component that uses a signal. I made a demo on StackBlitz.

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

function Counter({ start = 0 }) {
	const count = useSignal(start);

	function increment() {
		count.value += 1;
	}

	return (
		<div>
			<p>Count: {count}</p>

			<button type="button" onClick={increment}>
				Increment
			</button>
		</div>
	);
}

export default Counter;

Aside from the considerable performance benefits, which are explained in detail in the signals guide, this is objectively more ergonomic than the useState() hook. Sure, having to update the value property is a little clunky, but it’s necessary because values are not directly observable in JavaScript without proxies. It’s still more ergonomic than calling setCount(count + 1). The only thing better is the way Svelte does it—through normal variable reassignment—but this is only possible because Svelte has a compilation step.

I won’t say any more about signals in this post. The Preact team has already done a great job explaining them. I just want to make people aware that signals are available in React. They make your life easier and your app faster. What’s not to like?