-
Notifications
You must be signed in to change notification settings - Fork 50k
Description
Summary
There is huge discussion about Signals and Observables, Solid.js is built upon Signals, highly popular library like react-use has useObservable util hook.
"Recently", a Signals proposal appeared and quickly drew attention.
Proposal
I thought it would be really handy if React would have a way to support this kind of structure - observe the state. I know there is useSyncExternalStore, but the signature is a little bit different and it can't be used in conditionals.
So if something like that would work... I would expect the following to work
import { use } from "react"
import { searchSignal } from "@/signals"
function Images() {
const search = use(searchSignal)
return (...)
}
function App() {
return (
<SearchBar />
<Images />
)
}
function SearchBar() {
return <input onChange={event => searchSignal.set(event.currentTarget.value)} />
}Explanation
The Signal itself is an abstraction, which only implements get method and subscribe from this proposal.
The use hook would have the following signature
interface Getter<T> {
get?(): T
}
interface Observable<T> {
subscribe?(): { unsubscribe(): void }
}
function use<T>(... | Getter<T> | Observable<T> | (Getter<T> & Observable<T>)): TThe Getter and Observable could work in tandem to allow getting initial value while listening for further updates.
Not sure about use, it might be better to implement completely standalone hook like useSignal or useObservable.
Not sure if this was already discussed and proposed, I couldn't find any related topics.