useAtomCallback

import { useAtomCallback } from 'jotai/utils'

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

import { atom, useAtom } from 'jotai'
import { useAtomCallback } from 'jotai/utils'

const countAtom = atom(0)
const nameAtom = atom('John')

function UserStats() {
  const [count] = useAtom(countAtom)
  
  const logUserInfo = useAtomCallback(
    (get) => {
      const currentCount = get(countAtom)
      const currentName = get(nameAtom)
      console.log(`${currentName} has count: ${currentCount}`)
    }
  )
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={logUserInfo}>Log Info</button>
    </div>
  )
}

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

const userAtom = atom({ id: 1, name: 'John' })
const statusAtom = atom('idle')

function SaveButton() {
  const saveUser = useAtomCallback(
    async (get, set) => {
      set(statusAtom, 'saving')
      
      const user = get(userAtom)
      
      try {
        await fetch('/api/users', {
          method: 'POST',
          body: JSON.stringify(user)
        })
        set(statusAtom, 'success')
      } catch (error) {
        set(statusAtom, 'error')
      }
    }
  )
  
  return <button onClick={saveUser}>Save</button>
}

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

const itemsAtom = atom<string[]>([])

function ItemManager() {
  const addItem = useAtomCallback(
    (get, set, newItem: string) => {
      const items = get(itemsAtom)
      set(itemsAtom, [...items, newItem])
    }
  )
  
  const removeItem = useAtomCallback(
    (get, set, index: number) => {
      const items = get(itemsAtom)
      set(itemsAtom, items.filter((_, i) => i !== index))
    }
  )
  
  return (
    <div>
      <button onClick={() => addItem('New Item')}>Add</button>
      <button onClick={() => removeItem(0)}>Remove First</button>
    </div>
  )
}

import { atom, useAtom } from 'jotai'
import { useAtomCallback } from 'jotai/utils'

const formAtom = atom({ name: '', email: '' })

function Form() {
  const [form, setForm] = useAtom(formAtom)
  
  // This callback reads the form without causing re-renders
  const validateForm = useAtomCallback(
    (get) => {
      const currentForm = get(formAtom)
      return currentForm.name.length > 0 && currentForm.email.includes('@')
    }
  )
  
  const handleSubmit = () => {
    if (validateForm()) {
      console.log('Form is valid!')
    }
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <input 
        value={form.name} 
        onChange={(e) => setForm({ ...form, name: e.target.value })} 
      />
      <input 
        value={form.email} 
        onChange={(e) => setForm({ ...form, email: e.target.value })} 
      />
      <button type="submit">Submit</button>
    </form>
  )
}