useCallbackCompare

Custom useCallback that returns memoized callback that changes only when comparator function, received as third parameter, returns true.

Demo

INFO

The component has:

• a state useState variable with id and name properties.
• a useMemo that return that value of state variable.
• a useMemoCompare that return that value of state variable and a function compare that compares state name property.
• a button with a function attached to onClick event that increment state id property.

Since compare function compares only name property, useMemoCompare is executed only once and its state value isn't updated. You can see this in dev tool console also.

Loading demo…

Show source code

import { useCallback, useState } from "react";
import { useCallbackCompare } from "../../../..";

const UseCallbackCompare = () => {
	const [state, setState] = useState({ id: 0, name: "state" });
	const [message, setMessage] = useState("Nothing to show...");

	const defaultCallback = useCallback(() => {
		setMessage(`useCallback: id:${state.id} - name:${state.name}`);
	}, [state]);

	const callbackCompare = useCallbackCompare(
		() => {
			setMessage(`useCallbackCompare: id:${state.id} - name:${state.name}`);
		},
		[state],
		(oldDeps, newDeps) => oldDeps[0].name !== newDeps[0].name
	);

	return (<>
		<p>Current state: id: {state.id} - name: {state.name}</p>
		<p>{message}</p>
		<button style={{margin: '0 .25rem'}} onClick={() => setState(t => ({ ...t, id: t.id + 1 }))}>Increment state counter</button>
		<button style={{margin: '0 .25rem'}} onClick={defaultCallback}>Set defaultCallback message</button>
		<button style={{margin: '0 .25rem'}} onClick={callbackCompare}>Set callbackCompare message</button>
	</>);
};

UseCallbackCompare.displayName = "UseCallbackCompare";

export { UseCallbackCompare };

Types

UseCallbackCompareProps

• @template T - The type of the callback function to memoize. Inferred automatically from the cb argument.
• @template E - The tuple type of the dependency list. Inferred automatically from the deps argument, providing stricter typing than the standard DependencyList.

Parameters accepted by useCallbackCompare.

Property	Type	Required	Description
cb	T	✓	The callback function to memoize. Returned as-is when the dependencies are considered unchanged by compareFn. A new reference is returned only when compareFn determines that at least one dependency has changed.
deps	DependencyListTyped<E>	✓	A strictly-typed dependency array (same semantics as useCallback). Passed to compareFn on each render to determine whether the memoized callback should be updated. Using {@link DependencyListTyped} instead of the standard DependencyList provides compile-time checking of dependency types.
compareFn	CompareFn<E>		An optional custom comparison function used to decide whether the dependencies have changed between renders. Receives the previous and next dependency arrays and should return true when they are considered equal (i.e. the callback should be kept) and false when they differ (i.e. a new callback reference should be returned). When omitted, a deep equality check is used by default.

UseCallbackCompareResult

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

Return value of useCallbackCompare.

The memoized version of cb, with the same type and signature as the original. A new reference is only returned when compareFn determines that the dependencies have changed; otherwise the previous reference is preserved across renders.

export type UseCallbackCompareResult<T extends Function> = T;