Loading...
Please waitLoading...
Please waitMemoize functions to prevent unnecessary re-computations with the useMemoizedFn hook, providing a way to optimize performance in React components.
pnpm dlx uselab@latest add use-memoized-fn
import { useMemoizedFn } from "@/hooks/use-memoized-fn"
export function Component() {
const memoizedFn = useMemoizedFn((arg: string) => {
console.log("Function called with argument:", arg)
return `Hello, ${arg}!`
})
return (
<div style={{ padding: "20px", maxWidth: "600px", margin: "0 auto" }}>
<button onClick={() => memoizedFn("World")}>
Call Memoized Function
</button>
</div>
)
}| Name | Type | Description | Default Value | Optional |
|---|---|---|---|---|
function | Function | The function to be memoized. | - | No |
| Name | Type | Description |
|---|---|---|
memoizedFn | Function | A memoized version of the provided function. |