atomWithRefresh

import { atomWithRefresh } from 'jotai/utils'

// Read-only overload
function atomWithRefresh<Value>(
  read: (get: Getter, options: Options) => Value,
): WritableAtom<Value, [], void>

// Writable overload
function atomWithRefresh<Value, Args extends unknown[], Result>(
  read: (get: Getter, options: Options) => Value,
  write: (get: Getter, set: Setter, ...args: Args) => Result,
): WritableAtom<Value, Args | [], Result | void>

import { useAtom } from 'jotai'
import { atomWithRefresh } from 'jotai/utils'

const timestampAtom = atomWithRefresh(() => Date.now())

function Timestamp() {
  const [timestamp, refresh] = useAtom(timestampAtom)

  return (
    <div>
      <p>Current time: {new Date(timestamp).toLocaleTimeString()}</p>
      <button onClick={() => refresh()}>Refresh</button>
    </div>
  )
}

import { atomWithRefresh } from 'jotai/utils'

const userAtom = atomWithRefresh(async () => {
  const response = await fetch('/api/user')
  return response.json()
})

function UserProfile() {
  const [user, refresh] = useAtom(userAtom)

  return (
    <div>
      <h1>{user.name}</h1>
      <button onClick={() => refresh()}>Refresh User Data</button>
    </div>
  )
}

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

const userIdAtom = atom(1)

const userDataAtom = atomWithRefresh(async (get) => {
  const userId = get(userIdAtom)
  const response = await fetch(`/api/users/${userId}`)
  return response.json()
})

function UserComponent() {
  const [userId, setUserId] = useAtom(userIdAtom)
  const [userData, refreshUserData] = useAtom(userDataAtom)

  return (
    <div>
      <select value={userId} onChange={(e) => setUserId(Number(e.target.value))}>
        <option value={1}>User 1</option>
        <option value={2}>User 2</option>
      </select>
      <p>{userData.name}</p>
      <button onClick={() => refreshUserData()}>Force Refresh</button>
    </div>
  )
}

import { atomWithRefresh } from 'jotai/utils'

const dataAtom = atomWithRefresh(
  async () => {
    const response = await fetch('/api/data')
    return response.json()
  },
  async (get, set, newData: any) => {
    // Custom write: update server then refresh
    await fetch('/api/data', {
      method: 'POST',
      body: JSON.stringify(newData),
    })
    // Refresh to get updated data from server
    set(dataAtom) // Empty call triggers refresh
  }
)

function DataEditor() {
  const [data, updateData] = useAtom(dataAtom)

  const handleSave = async () => {
    await updateData({ ...data, modified: true })
  }

  const handleRefresh = () => {
    updateData() // No args = refresh
  }

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <button onClick={handleSave}>Save</button>
      <button onClick={handleRefresh}>Refresh</button>
    </div>
  )
}

import { useAtom } from 'jotai'
import { atomWithRefresh } from 'jotai/utils'
import { useEffect } from 'react'

const liveDataAtom = atomWithRefresh(async () => {
  const response = await fetch('/api/live-data')
  return response.json()
})

function LiveDashboard() {
  const [data, refresh] = useAtom(liveDataAtom)

  useEffect(() => {
    // Auto-refresh every 5 seconds
    const interval = setInterval(() => {
      refresh()
    }, 5000)

    return () => clearInterval(interval)
  }, [refresh])

  return <div>Live Data: {JSON.stringify(data)}</div>
}