# 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

```tsx
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

▶ Try it live: [https://valdres.dev/react/useAtom](https://valdres.dev/react/useAtom)

## Returns

| Index | Type          | Description                         |
| ----- | ------------- | ----------------------------------- |
| `[0]` | `T`           | Current 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:

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

> **Note**
>
>
> If you only need to read the value, use [useValue](https://valdres.dev/react/useValue) instead — it has the same subscription behavior but a simpler return type. If you only need the setter, use [useSetAtom](https://valdres.dev/react/useSetAtom) to avoid subscribing to changes.

## See also

- [useValue](https://valdres.dev/react/useValue) — read-only hook (no setter)
- [useSetAtom](https://valdres.dev/react/useSetAtom) — write-only hook (no subscription)
- [useResetAtom](https://valdres.dev/react/useResetAtom) — reset to default value