useEffectDeepCompare

Custom useEffect that reexecutes EffectCallback only when 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 useEffect that updates renders memo property when state variable change.
• a useMemoDeepCompare that updates renders deepMemo property when state variable change.
• a button with a function attached to onClick event that assigns to state variable the same value.

Since useEffectDeepCompare 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 { useEffect, useState } from "react";
import { useEffectDeepCompare } from "../../../..";

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

	useEffect(() => {
		console.log("Render default useEffect");
		setRenders(r => ({...r, memo: r.memo+1}));
	}, [state])

	useEffectDeepCompare(() => {
		console.log("Render memoDeepCompare");
		setRenders(r => ({...r, deepMemo: r.deepMemo+1}));
	}, [state]);

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

UseEffectDeepCompare.displayName = "UseEffectDeepCompare";

export { UseEffectDeepCompare };