useEventCallback

Custom hook that creates a memoized event callback.

Usage

import { useEventCallback } from 'vhooks'

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

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

Installation

pnpm

pnpm dlx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useEventCallback.json -e %src%/hooks

npm

npx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useEventCallback.json -e %src%/hooks

bun

bunx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useEventCallback.json -e %src%/hooks

yarn

yarn dlx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useEventCallback.json -e %src%/hooks

API

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

Custom hook that creates a memoized event callback.

Type parameters

Name	Type	Description
Args	extends unknown[]	An array of argument types for the event callback.
R	R	The return type of the event callback.

Parameters

Name	Type	Description
fn	(...args: Args) => R	The callback function.

Returns

fn

A memoized event callback function.

▸ (...args): R

Parameters

Name	Type
...args	Args

Returns

R

Hook

import { useCallback, useRef } from 'react'

import { useIsomorphicLayoutEffect } from 'vhooks'

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
}