useEventCallback

useEventCallback<Args, Return>(fn): (…args) => Return

Defined in: src/hooks/useEventCallback/useEventCallback.ts:34

Wrap a callback so its identity stays stable for the component lifetime while it always invokes the most recently rendered version — the useEffectEvent pattern, backed by useInsertionEffect.

The stored callback is refreshed in useInsertionEffect, which commits before any layout effect. So the freshness guarantee holds even for consumers that read it during the same commit: a child’s useLayoutEffect, a synchronous external-store subscription, an imperative handle. A passively updated ref (e.g. useLatest, which writes in useEffect) would still be one render stale in those cases.

Pass the result to memoized children, dependency arrays, or external subscriptions without re-subscribing — the reference never changes, yet it still closes over the latest props and state.

The one rule: do not call it during render. Like an event handler it reads through a ref, so a render-phase call has no meaningful “latest” value to read. Use it in event handlers, effects, layout effects, timers, and subscriptions only.

Type Parameters

Args

Args extends unknown[]

Return

Return

Parameters

fn

(…args) => Return

Returns

(…args) => Return

Example

const handleChange = useEventCallback((value: string) => {
  onChange?.(value, internalState);
});
useEffect(() => store.subscribe(handleChange), [handleChange]);