useMemoizedFn

Hook to store a function that will never change while keeping its dependencies always up to date. Can be used instead of useCallback, without esplicity dependencies array.

Demo

INFO

The component has:

• A useState that receives an object, with two properties _memoizedValue and value passed respectively like value to input component 1 nd input component 2.
• A updateStateMemoized function to handle onChange event of the input component 1, create with useMemoizedFn.
• A updateState function to handle onChange event of the input component 2, created with useCallback.
• Both functions update state with a new object create with previous state object and the new value that the specific input component has changed.

When value of input component 1 changes, the state changes and updateState function is reevaluated, so a new value props is passed to input component 2 that rerenders. Instead when value of input component 2 changes, the updateStateMemoized function doesn't change, so input component 1 doesn't rerender.

Loading demo…

Show source code

import { BaseSyntheticEvent, useCallback, useState } from "react";
import { useMemoizedFn } from "../../../..";
import { Input } from "./InputMemo";

export const UseMemoizedFn = () => {
	const [state, setState] = useState({memoizedValue: "", value: ""});

	const updateStateMemoized = useMemoizedFn((e: BaseSyntheticEvent) => setState({...state, memoizedValue: e.target.value}));
	const updateState = useCallback((e: BaseSyntheticEvent) => setState({...state, value: e.target.value}), [state])
	return (
		<div style={{ display: "grid", gridTemplateColumns: "auto auto", justifyContent: "center", gap: 50 }}>
			<div>
				<p><strong>updateStateMemoized</strong></p>
				<div style={{ gridTemplateRows: "auto", justifyContent: 'center', display: 'grid', gap: '10px' }}>
					<Input id="idG" name="id" value={state.memoizedValue} onChange={updateStateMemoized} />
				</div>
			</div>
			<div>
				<p><strong>updateState</strong></p>
				<div style={{ gridTemplateRows: "auto", justifyContent: 'center', display: 'grid', gap: '10px' }}>
					<Input id="eta" name="eta" value={state.value} onChange={updateState} />
				</div>
			</div>
		</div>
	);
}

Types

UseMemoizedFnProps

• @template T - The type of the function to memoize. Must be a callable with any argument and return type. Inferred automatically from the fn argument.

Parameters accepted by useMemoizedFn.

Property	Type	Required	Description
fn	T	✓	The function to wrap with a stable reference. The returned function always delegates to the latest version of fn captured during the most recent render, without the stable wrapper identity ever changing between renders. Useful as a replacement for useCallback when the dependency array would be large or difficult to maintain.

UseMemoizedFnResult

• @template T - The type of the original function.

Return value of useMemoizedFn.

A stable function with the same signature as fn whose identity never changes between renders. Internally always calls the latest version of fn, so it is safe to use as an event handler or effect dependency without causing unnecessary re-runs.

export type UseMemoizedFnResult<T extends (...args: any[]) => any> = T;