Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA ref that always holds the newest value, so a timer, listener or async callback can read current props and state without being re-created.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it when a long-lived callback (an interval, a WebSocket handler, a debounced function) must see the current value but should not be torn down and re-created on every change.
Do not read the ref during render to compute output; it updates after render, so use the value itself there.
import { useLatest } from "@/hooks/use-latest"const latest = useLatest(query)
React.useEffect(() => {
const id = setInterval(() => poll(latest.current), 5000)
return () => clearInterval(id)
}, [latest])useLatest<T>(value: T): { readonly current: T }
| Name | Type | Description |
|---|---|---|
value | T | The value to keep fresh. |
| Returns | ref | The same ref object on every render. .current is updated after each commit. |
The ref is updated in a layout effect, so event handlers and effects that run after commit always see the newest value.
A hook has no markup and no accessibility surface of its own.
The hook ships with renderHook tests (use-latest.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.