Skip to main content
Module

x/jotai/docs/utilities/resettable.mdx

👻 Primitive and flexible state management for React
Go to Latest
File
---title: Resettablenav: 3.04keywords: reset,default---
## atomWithReset
Ref: https://github.com/pmndrs/jotai/issues/41
```tsfunction atomWithReset<Value>( initialValue: Value): WritableAtom<Value, SetStateAction<Value> | typeof RESET>```
Creates an atom that could be reset to its `initialValue` with[`useResetAtom`](use-reset-atom.mdx) hook. It works exactly the sameway as primitive atom would, but you are also able to set it to a special value[`RESET`](reset.mdx). See examples in [Resettable atoms](../utilities/resettable.mdx).
### Example
```jsimport { atomWithReset } from 'jotai/utils'
const dollarsAtom = atomWithReset(0)const todoListAtom = atomWithReset([ { description: 'Add a todo', checked: false },])```
## RESET
Ref: https://github.com/pmndrs/jotai/issues/217
```tsconst RESET: unique symbol```
Special value that is accepted by [Resettable atoms](../utilities/resettable.mdx)created with [`atomWithReset`](../utilities/resettable.mdx), [`atomWithDefault`](../utilities/resettable.mdx)or writable atom created with `atom` if it accepts `RESET` symbol.
### Example
```jsximport { atom, useSetAtom } from 'jotai'import { atomWithReset, useResetAtom, RESET } from 'jotai/utils'
const dollarsAtom = atomWithReset(0)const centsAtom = atom( (get) => get(dollarsAtom) * 100, (get, set, newValue: number | typeof RESET) => set(dollarsAtom, newValue === RESET ? newValue : newValue / 100))
const ResetExample = () => { const setDollars = useSetAtom(dollarsAtom) const resetCents = useResetAtom(centsAtom) return ( <> <button onClick={() => setDollars(RESET)}>Reset dollars</button> <button onClick={resetCents}>Reset cents</button> </> )}```
## useResetAtom
```tsfunction useResetAtom<Value>( anAtom: WritableAtom<Value, typeof RESET>): () => void | Promise<void>```
Resets a [Resettable atom](../utilities/resettable.mdx) to its initial value.
### Example
```jsximport { useResetAtom } from 'jotai/utils'import { todoListAtom } from './store'
const TodoResetButton = () => { const resetTodoList = useResetAtom(todoListAtom) return <button onClick={resetTodoList}>Reset</button>}```
## atomWithDefault
Ref: https://github.com/pmndrs/jotai/issues/352
### Usage
This is a function to create a resettable primitive atom.Its default value can be specified with a read function instead of a static initial value.
```jsimport { atomWithDefault } from 'jotai/utils'
const count1Atom = atom(1)const count2Atom = atomWithDefault((get) => get(count1Atom) * 2)```
### Codesandbox
<CodeSandbox id="unfro" />### Resetting default values
You can reset the value of an `atomWithDefault` atom to its original default value.
```jsximport { useAtom } from 'jotai'import { atomWithDefault, useResetAtom, RESET } from 'jotai/utils'
const count1Atom = atom(1)const count2Atom = atomWithDefault((get) => get(count1Atom) * 2)
const Counter = () => { const [count1, setCount1] = useAtom(count1Atom) const [count2, setCount2] = useAtom(count2Atom) const resetCount2 = useResetAtom(count2Atom) return ( <> <div> count1: {count1}, count2: {count2} </div> <button onClick={() => setCount1((c) => c + 1)}>increment count1</button> <button onClick={() => setCount2((c) => c + 1)}>increment count2</button> <button onClick={() => resetCount2()}>Reset with useResetAtom</button> <button onClick={() => setCount2(RESET)}>Reset with RESET const</button> </> )}```
This can be useful when an `atomWithDefault` atom value is overwrittenusing the `set` function, in which case the provided `getter` functionis no longer used and any change in dependencies atoms will not trigger an update.
Resetting the value allows us to restore its original default value,discarding changes made previously via the `set` function.