Valdres

useResetAtom

Signature
useResetAtom(atom: Atom<any>): () => void

valdres-react Reset an atom to its default value

Returns a function that resets an atom back to its default value. For async atoms, this re-triggers the initializer function.

Usage

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

const countAtom = atom(0)

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

Resetting async atoms

Tip
When you reset an async atom, the initializer function runs again. Combined with Suspense, this gives you a clean refetch pattern.

const dataAtom = atom(() =>
    fetch("/api/data").then(res => res.json())
)

function RefreshButton() {
    const reset = useResetAtom(dataAtom)
    return <button onClick={reset}>Refresh</button>
}

See also