useMemoCompare

Custom useMemo that returns memoized value 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 message useState variable that's a string rendered in a tag p.
• a useCallback function that update message variable with state variable values.
• a useCallbackCompare function that update message variable with state variable values and a compare function that checks if name property of state change.
• a button with a function attached to onClick event that increment state id property.
• a button with a useCallback function attached to onClick event.
• a button with a useCallbackCompare function attached to onClick event.

Since compare function compares only name property, useCallbackCompare don't update its state value and set always same message.

Loading demo…

Show source code

import { useMemo, useState } from "react";
import { useMemoCompare } from "../../../..";

const UseMemoCompare = () => {
	const [state, setState] = useState({ id: 0, name: "state" });

	const defaultMemo = useMemo(() => {
		console.log("Render defaultMemo");
		return <p>useMemo: id:{state.id} - name:{state.name}</p>
	}, [state]);

	const memoCompare = useMemoCompare(
		() => {
			console.log("Render memoCompare");
			return <p>useMemoCompare: id:{state.id} - name:{state.name}</p>
		},
		[state],
		(oldDeps, newDeps) => oldDeps[0].name !== newDeps[0].name
	);

	return (<>
		<p>Current state: id: {state.id} - name: {state.name}</p>
		{defaultMemo}
		{memoCompare}
		<button onClick={() => setState(t => ({ ...t, id: t.id + 1 }))}>Increment</button>
	</>);
};

UseMemoCompare.displayName = "UseMemoCompare";

export { UseMemoCompare };

Types

UseMemoCompareProps

• @template T - The type of the memoized value produced by cb. Inferred automatically from its return type.
• @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 useMemoCompare.

Property	Type	Required	Description
cb	() => T	✓	A factory function that computes the memoized value. Re-invoked only when compareFn determines that the dependencies have changed between renders. When the dependencies are considered unchanged, the previous value is returned without calling cb again.
deps	DependencyListTyped<E>	✓	A strictly-typed dependency array (same semantics as useMemo). Passed to compareFn on each render to determine whether the memoized value should be recomputed. 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 memoized value should be kept) and false when they differ (i.e. cb should be re-invoked). When omitted, a deep equality check is used by default.

UseMemoCompareResult

• @template T - The type of the memoized value.

Return value of useMemoCompare.

The memoized value returned by cb. Recomputed only when compareFn determines that the dependencies have changed; otherwise the previous value is preserved across renders.

export type UseMemoCompareResult<T> = T;