Skip to main content

useResetAtom

Resets an atom to its initial value.

Import

import { useResetAtom } from 'jotai/utils'

Signature

function useResetAtom<T>(
  anAtom: WritableAtom<unknown, [typeof RESET], T>,
  options?: Options
): () => T

Parameters

anAtom
WritableAtom<unknown, [typeof RESET], T>
required
A writable atom that can be reset.
options
Options
Optional configuration:
  • store: Specify a custom store to use

Returns

Returns a callback function that resets the atom to its initial value when called. Type: () => T

Usage

import { atom } from 'jotai'
import { useResetAtom } from 'jotai/utils'

const countAtom = atom(0)

function Counter() {
  const resetCount = useResetAtom(countAtom)
  
  return (
    <button onClick={resetCount}>
      Reset counter
    </button>
  )
}

Usage with atomWithReset

import { useAtom } from 'jotai'
import { atomWithReset, useResetAtom } from 'jotai/utils'

const userAtom = atomWithReset({ name: 'John', age: 30 })

function UserProfile() {
  const [user, setUser] = useAtom(userAtom)
  const resetUser = useResetAtom(userAtom)
  
  return (
    <div>
      <input 
        value={user.name} 
        onChange={(e) => setUser({ ...user, name: e.target.value })} 
      />
      <button onClick={resetUser}>Reset to default</button>
    </div>
  )
}
  • atomWithReset - Create an atom that can be reset
  • useSetAtom - Set atom value without subscribing to updates
  • RESET - The RESET symbol used to reset atoms

Build docs developers (and LLMs) love