Skip to main content
Module

x/jotai/docs/utilities/callback.mdx

👻 Primitive and flexible state management for React
Go to Latest
File
---title: Callbacknav: 3.99keywords: callbackpublished: false---
## useAtomCallback
Ref: https://github.com/pmndrs/jotai/issues/60
### Usage
```tsuseAtomCallback<Result, Args extends unknown[]>( callback: (get: Getter, set: Setter, ...arg: Args) => Result, options?: Options): (...args: Args) => Result```
This hook is for interacting with atoms imperatively.It takes a callback function that works like atom write function,and returns a function that returns an atom value.
The callback to pass in the hook must be stable (should be wrapped with useCallback).
### Examples
```jsximport { useEffect, useState, useCallback } from 'react'import { Provider, atom, useAtom } from 'jotai'import { useAtomCallback } from 'jotai/utils'
const countAtom = atom(0)
const Counter = () => { const [count, setCount] = useAtom(countAtom) return ( <> {count} <button onClick={() => setCount((c) => c + 1)}>+1</button> </> )}
const Monitor = () => { const [count, setCount] = useState(0) const readCount = useAtomCallback( useCallback((get) => { const currCount = get(countAtom) setCount(currCount) return currCount }, []), ) useEffect(() => { const timer = setInterval(async () => { console.log(readCount()) }, 1000) return () => { clearInterval(timer) } }, [readCount]) return <div>current count: {count}</div>}```
### Codesandbox
<CodeSandbox id="95gxnt" />