useEventCallback

Custom hook that creates a memoized event callback.

Usage

import { useEventCallback } from 'usehooks-ts'

export default function Component() {
  const handleClick = useEventCallback(event => {
    // Handle the event here
    console.log('Clicked', event)
  })

  return <button onClick={handleClick}>Click me</button>
}

API

▸ useEventCallback<Args, R>(fn): (...args: Args) => R

Custom hook that creates a memoized event callback.

Type parameters

NameTypeDescription
Argsextends unknown[]An array of argument types for the event callback.
RRThe return type of the event callback.

Parameters

NameTypeDescription
fn(...args: Args) => RThe callback function.

Returns

fn

A memoized event callback function.

▸ (...args): R

Parameters
NameType
...argsArgs
Returns

R

Hook

import { useCallback, useRef } from 'react'

import { useIsomorphicLayoutEffect } from 'usehooks-ts'

export function useEventCallback<Args extends unknown[], R>(
  fn: (...args: Args) => R,
): (...args: Args) => R
export function useEventCallback<Args extends unknown[], R>(
  fn: ((...args: Args) => R) | undefined,
): ((...args: Args) => R) | undefined
export function useEventCallback<Args extends unknown[], R>(
  fn: ((...args: Args) => R) | undefined,
): ((...args: Args) => R) | undefined {
  const ref = useRef<typeof fn>(() => {
    throw new Error('Cannot call an event handler while rendering.')
  })

  useIsomorphicLayoutEffect(() => {
    ref.current = fn
  }, [fn])

  return useCallback((...args: Args) => ref.current?.(...args), [ref]) as (
    ...args: Args
  ) => R
}
useDocumentTitleuseEventListener