Documentation Index
Fetch the complete documentation index at: https://mintlify.com/tim-smart/effect-atom/llms.txt
Use this file to discover all available pages before exploring further.
Overview
The useAtomRefresh hook returns a function that can be used to manually trigger a refresh of an atom’s value. This is useful for refetching data or recalculating derived state on demand.
Signature
function useAtomRefresh<A>(atom: Atom<A>): () => void
Behavior
- Mounts the atom in the registry
- Returns a stable refresh function
- Calling the refresh function rebuilds the atom’s value
- For Effect-based atoms, the Effect is re-run
- For computed atoms, the computation is re-executed
Usage
Refresh data on demand
import { Atom, useAtomValue, useAtomRefresh } from "@effect-atom/atom-react"
import { Effect } from "effect"
const userDataAtom = Atom.make(
Effect.gen(function* () {
const response = yield* Effect.tryPromise(() =>
fetch("/api/user").then(r => r.json())
)
return response
})
)
function UserProfile() {
const result = useAtomValue(userDataAtom)
const refresh = useAtomRefresh(userDataAtom)
return (
<div>
{Result.match(result, {
onInitial: () => <p>Loading...</p>,
onSuccess: (user) => (
<div>
<h1>{user.name}</h1>
<button onClick={refresh}>Refresh</button>
</div>
),
onFailure: () => <p>Error loading user</p>
})}
</div>
)
}
Refresh on interval
import { useEffect } from "react"
function AutoRefreshData() {
const data = useAtomValue(dataAtom)
const refresh = useAtomRefresh(dataAtom)
useEffect(() => {
// Refresh every 30 seconds
const interval = setInterval(refresh, 30000)
return () => clearInterval(interval)
}, [refresh])
return <DataDisplay data={data} />
}
Refresh multiple atoms
function RefreshAll() {
const refreshUsers = useAtomRefresh(usersAtom)
const refreshSettings = useAtomRefresh(settingsAtom)
const refreshNotifications = useAtomRefresh(notificationsAtom)
const refreshAll = () => {
refreshUsers()
refreshSettings()
refreshNotifications()
}
return <button onClick={refreshAll}>Refresh All Data</button>
}
Pull-to-refresh
import { useState } from "react"
function PullToRefreshList() {
const items = useAtomValue(itemsAtom)
const refresh = useAtomRefresh(itemsAtom)
const [isRefreshing, setIsRefreshing] = useState(false)
const handleRefresh = async () => {
setIsRefreshing(true)
refresh()
// Wait a moment for the refresh to complete
await new Promise(resolve => setTimeout(resolve, 500))
setIsRefreshing(false)
}
return (
<div>
<button onClick={handleRefresh} disabled={isRefreshing}>
{isRefreshing ? "Refreshing..." : "Pull to Refresh"}
</button>
<ItemsList items={items} />
</div>
)
}
Notes
The refresh function is stable across renders - it won’t cause unnecessary re-renders when used in dependency arrays.
Refreshing an atom will rebuild it from scratch, running any Effects or computations. Be mindful of expensive operations.
Refresh vs. Set
| Operation | Use case |
|---|
refresh() | Rebuild the atom’s value (refetch data, recompute) |
set(value) | Update the atom with a new value directly |