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.Installation
npx sse-hooks add use-memoized-fn
yarn dlx sse-hooks add use-memoized-fn
pnpm dlx sse-hooks add use-memoized-fn
deno run -A npm:sse-hooks add use-memoized-fn
bunx sse-hooks add use-memoized-fn
Usage
example.ts
import { useMemoizedFn } from "./{hooks file}";
const [state, setState] = useState(0);
// The identity of 'callback' never changes, but it always logs the latest 'state'
const callback = useMemoizedFn(() => {
console.log("Current state:", state);
});
return <ExpensiveComponent onClick={callback} />;
API
Parameters
| Prop | Default | Type |
|---|---|---|
fn | - |
The function to be memoized. |
Returns
| Return Value | Default | Type |
|---|---|---|
return | - |
Hook return value |
Types Aliases
No specific type aliases defined for this component.
Changelog
e9d5f — feat: add useMemoizedFn hook for memoizing function identities across re-renders
useMediaQuality
Custom hook to manage video stream quality by applying constraints (resolution and frame rate) to a MediaStream track.
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