useCallbackRef
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-tool add use-callback-ref
npm install sse-hooks
Usage
import { useCallbackRef } from "./{hooks file}";
const handleClick = useCallbackRef((event: MouseEvent) => {
console.log("Clicked!", event);
});
useEffect(() => {
window.addEventListener("click", handleClick);
return () => window.removeEventListener("click", handleClick);
}, []);
import { useCallbackRef } from "sse-hooks";
const handleClick = useCallbackRef((event: MouseEvent) => {
console.log("Clicked!", event);
});
useEffect(() => {
window.addEventListener("click", handleClick);
return () => window.removeEventListener("click", handleClick);
}, []);
API
Parameters
| Name | Type | Description |
| :------- | :--- | :---------- | ------------------------------------------------------------- |
| callback | T | undefined | The callback function to store in a ref. It can be undefined. |
Return Value
Returns T.
T A stable function reference that always calls the latest callback.
Changelog
81fa5 — feat: add useAutoSave and useCallbackRef hooks with comprehensive documentation