Preact Signals, but in React. Licensed under CC0-1.0.

useSignal.ts

import { useCallback, useSyncExternalStore } from "react"

class Signal<T> {
	#value: T

	constructor(value: T) {
		this.#value = value
	}

	get value() {
		return this.#value
	}

	set value(value: T) {
		this.#value = value
		for (const listener of this.#listeners) {
			listener()
		}
	}

	#listeners: Set<() => void> = new Set()

	addListener(listener: () => void) {
		this.#listeners.add(listener)
	}

	removeListener(listener: () => void) {
		this.#listeners.delete(listener)
	}
}

const useSignal = <T>(signal: Signal<T>): T => {
	const subscribe = useCallback<(onStoreChange: () => void) => () => void>(
		(onStoreChange) => {
			signal.addListener(onStoreChange)
			return () => {
				signal.removeListener(onStoreChange)
			}
		},
		[signal]
	)

	const getSnapshot = useCallback<() => T>(() => signal.value, [signal])

	return useSyncExternalStore(subscribe, getSnapshot)
}

export { useSignal, Signal }