Valdres

useAtom

Signature
useAtom<T>(atom: Atom<T>): [T, SetterFn<T>]

valdres-react Subscribe to and update an atom's value

A React hook similar to useState() that returns the current value and a setter function for an atom. The component re-renders when the atom's value changes.

Usage

import { atom } from "valdres"
import { useAtom } from "valdres-react"

const countAtom = atom(0)

const Counter = () => {
    const [count, setCount] = useAtom(countAtom)
    return (
        <div>
            <span>{count}</span>
            <button onClick={() => setCount(c => c + 1)}>+</button>
        </div>
    )
}

Try it

Loading playground…

Returns

IndexTypeDescription
[0]TCurrent value of the atom
[1]SetterFn<T>Function to update the atom's value

Updater function

The setter supports both direct values and updater functions:

setCount(42)              // Set directly
setCount(prev => prev + 1) // Update based on previous value

Note
If you only need to read the value, use useValue instead — it has the same subscription behavior but a simpler return type. If you only need the setter, use useSetAtom to avoid subscribing to changes.

See also