useEventCallback
Memoized event callback creation with fresh closure access. Perfect for React applications requiring stable callbacks with Next.js integration and TypeScript support.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/use-event-callback.jsonnpx shadcn@latest add https://www.shadcn.io/registry/use-event-callback.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-event-callback.jsonbunx shadcn@latest add https://www.shadcn.io/registry/use-event-callback.jsonFeatures
- Stable callback references preventing unnecessary child component re-renders with React.useCallback optimization
- Fresh closure access ensuring callbacks always have access to latest state values and props
- Render safety with built-in protection against calling callbacks during component rendering
- TypeScript generics supporting flexible argument types and return values with complete type inference
- Memory efficient using useRef and useIsomorphicLayoutEffect for optimal performance patterns
- SSR compatible designed for Next.js server-side rendering with proper hydration handling
Examples
Advanced Form Handling
Comprehensive demo showing stable callbacks with state access, async operations, and performance monitoring with event logging.
Use Cases
This free open source React hook works well for:
- Form event handlers - Stable input callbacks with fresh state access using Next.js and TypeScript
- Performance optimization - Preventing unnecessary re-renders in React component trees
- Async operations - Event handlers with delayed execution using JavaScript promises and timers
- Component libraries - Stable API callbacks with shadcn/ui component integration
- State synchronization - Event callbacks that always access current state with Tailwind CSS styling
- Complex interactions - Multi-step operations requiring fresh closure access in React applications
API Reference
useEventCallback
With defined callback:
useEventCallback<Args extends unknown[], R>(
fn: (...args: Args) => R
): (...args: Args) => RWith optional callback:
useEventCallback<Args extends unknown[], R>(
fn: ((...args: Args) => R) | undefined
): ((...args: Args) => R) | undefinedParameters
| Parameter | Type | Description |
|---|---|---|
fn | (...args: Args) => R | undefined | The callback function to memoize |
Return Value
Returns a memoized callback that maintains a stable reference while always accessing fresh values from closures.
Type Parameters
| Parameter | Description |
|---|---|
Args | Array of argument types for the callback function |
R | Return type of the callback function |
Implementation Notes
- Callback reference remains stable across re-renders using React.useCallback with empty dependency array
- Fresh state access achieved through useRef that updates on every render via useIsomorphicLayoutEffect
- Throws helpful error if callback is invoked during rendering phase to prevent React warnings
- Compatible with TypeScript strict mode and provides full type inference for arguments and return values
- Uses useIsomorphicLayoutEffect for SSR compatibility and proper hydration timing in Next.js applications
- Memory footprint optimized through minimal dependency arrays and ref-based state management
useDocumentTitle
Dynamic document title management for React applications. Perfect for Next.js projects requiring browser tab updates with TypeScript support and seamless integration.
useEventListener
React hook that attaches event listeners to DOM elements, the window, or media query lists with automatic cleanup and type safety.