useMemoDeepCompare

Custom useMemo that returns memoized value that changes only if deps are different in depth.

Demo

INFO

The component has:

• a state useState variable with id and name properties.
• a renders useState variable with memo and deepMemo properties.
• a useMemo that returns that value of state object and updates renders memo property.
• a useMemoDeepCompare that returns that value of state object and updates renders deepMemo property.
• a button with a function attached to onClick event that assigns to state variable the same value.

Since useMemoDeepCompare checks for differences in depth, it is executed only once and it don't update renders deepMemo property. You can see this in dev tool console also.

Loading demo…

Show source code

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

const UseMemoDeepCompare = () => {
	const [state, setState] = useState({ id: 0, name: "state" });
	const [renders, setRenders] = useState({memo:0, deepMemo: 0});

	const defaultMemo = useMemo(() => {
		console.log("Render defaultMemo");
		setRenders(r => ({...r, memo: r.memo+1}));
		return `useMemo: id:${state.id} - name:${state.name}`
	}, [state]);

	const memoCompare = useMemoDeepCompare(() => {
		console.log("Render memoDeepCompare");
		setRenders(r => ({...r, deepMemo: r.deepMemo+1}));
		return `useMemoDeepCompare: id:${state.id} - name:${state.name}`
	}, [state]);

	return (<>
		<p>Current state: id: {state.id} - name: {state.name}</p>
		<p>{defaultMemo}{` ---> render: ${renders.memo}`}</p>
		<p>{memoCompare}{` ---> render: ${renders.deepMemo}`}</p>
		<button onClick={() => setState(t=> ({ ...t}))}>Increment</button>
	</>);
};

UseMemoDeepCompare.displayName = "UseMemoDeepCompare";

export { UseMemoDeepCompare };