useCallbackRef

GitHub

A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a prop or avoid re-executing effects when passed as a dependency

Installation

npx sse-hooks add use-callback-ref

yarn dlx sse-hooks add use-callback-ref

pnpm dlx sse-hooks add use-callback-ref

deno run -A npm:sse-hooks add use-callback-ref

bunx sse-hooks add use-callback-ref

Usage

example.ts

import { useCallbackRef } from "./{hooks file}";

const handleClick = useCallbackRef((event: MouseEvent) => {
  console.log("Clicked!", event);
});

useEffect(() => {
  window.addEventListener("click", handleClick);
  return () => window.removeEventListener("click", handleClick);
}, []);

API

Parameters

Prop	Default	Type
`callback`	-	`T` The callback function to store in a ref. It can be undefined.

Returns

Return Value	Default	Type
`return`	-	`T` Hook return value

Types Aliases

No specific type aliases defined for this component.

Changelog

81fa5 — feat: add useAutoSave and useCallbackRef hooks with comprehensive documentation

useMemoizedFn

A hook that returns a memoized version of a function. Unlike `useCallback`, the function identity remains stable across re-renders, but it always has access to the latest props and state without needing a dependency array. This is particularly useful for passing callbacks to optimized child components to prevent unnecessary re-renders while avoiding closure staleness.

useSearchWithSuggestions

A comprehensive hook for building "Command Palette" or "Omnibar" style search interfaces. * It provides "Ghost Text" autocomplete (like Google search), command scoping (like Slack's `/` commands), and keyboard support. It handles the complex logic of parsing input strings to separate commands from queries.