Valdres

useValue

Signature
useValue<T>(state: Atom<T> | Selector<T>): T

valdres-react Read-only subscription to state

A read-only hook that subscribes to an atom or selector value. Use this when you only need to read state — the component won't cause unnecessary re-renders from setter changes.

Usage

import { atom, selector } from "valdres"
import { useValue } from "valdres-react"

const nameAtom = atom("Valdres")
const greetingSelector = selector(get => `Hello, ${get(nameAtom)}!`)

function Greeting() {
    const greeting = useValue(greetingSelector)
    return <h1>{greeting}</h1>
}

With selector families

import { useValue } from "valdres-react"
import { userDisplayNameSelector } from "./state"

function UserName({ userId }) {
    const name = useValue(userDisplayNameSelector(userId))
    return <span>{name}</span>
}

See also