Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA function with a stable identity that always calls the newest version of your handler, so memoised children and effects never re-run for it.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for event handlers you pass to memoised children, to effect dependencies or to third-party code, when the handler reads fresh props or state.
Do not call the returned function during render, and do not use it where a changing identity should re-run an effect on purpose.
import { useStableCallback } from "@/hooks/use-stable-callback"const onSelect = useStableCallback((id: string) => save(id, draft))
// onSelect keeps the same identity, but always sees the latest draft.useStableCallback<A extends unknown[], R>(fn: (...args: A) => R): (...args: A) => R
| Name | Type | Description |
|---|---|---|
fn | function | The handler. The latest one is called. |
The wrapper keeps one identity for the life of the component. Do not call it during render: the newest handler is stored after the render commits.
A hook has no markup. Keep handlers passed to interactive elements reachable by keyboard as usual.
The hook ships with renderHook tests (use-stable-callback.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.