useAtomCallback

참조: https://github.com/pmndrs/jotai/issues/60

사용법

useAtomCallback<Result, Args extends unknown[]>(
  callback: (get: Getter, set: Setter, ...arg: Args) => Result,
  options?: Options
): (...args: Args) => Result

이 훅은 명령형으로 아톰과 상호작용하기 위해 사용됩니다.
아톰 쓰기 함수처럼 동작하는 콜백 함수를 받아서, 아톰 값을 반환하는 함수를 반환합니다.

훅에 전달할 콜백은 안정적이어야 합니다(useCallback으로 감싸는 것이 좋습니다).

예제

import { 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>현재 카운트: {count}</div>
}

Stackblitz