Shadcn.io is not affiliated with official shadcn/ui
React useEventCallback Hook
React useEventCallback hook for stable callback references with fresh state access. No stale closures, no re-renders. TypeScript ready.
React useEventCallback Hook preview
Stop fighting stale closures in React. useEventCallback returns a stable function reference that always accesses the latest props and state. Pass it to child components or useEffect dependencies without causing re-renders. Uses useLayoutEffect internally to update the ref synchronously. Prevents the "callback sees old state" bug that plagues setTimeout, event listeners, and memoized children. Full TypeScript generics support. Perfect for event handlers in optimized components, custom hooks, or anywhere you need stable identity with fresh values. Works with Next.js App Router.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this hook for you — no copy-paste, no CLI:
use shadcnio to install the use-event-callback hook into my projectRelated Components
React useDebounceCallback Hook
Debounce function calls
React useIsomorphicLayoutEffect Hook
SSR-safe useLayoutEffect
React useInterval Hook
Declarative setInterval management
React useTimeout Hook
Declarative setTimeout management
React useUnmount Hook
Run cleanup on unmount
React useBoolean Hook
Boolean state with toggle helpers
FAQ
Was this page helpful?
Sign in to leave feedback.