useDeepCompareEffect

A custom hook that runs an effect based on deep comparison of the dependency array.

React's built-in useEffect checks the dependency array using shallow comparison, so if an object or array reference changes, the effect re-runs even if the contents are the same.

useDeepCompareEffect performs deep comparison and runs the effect only when the actual values have changed.

caution

⚠️ Because deep comparison is performed, there may be performance implications. Avoid using this with complex objects or large arrays.

Code

🔗 View source code

Interface

typescript

function useDeepCompareEffect(
  effectCallback: EffectCallback,
  deps: DependencyList
): void

Parameters

Name	Type	Description
effectCallback	EffectCallback	The effect function to execute
deps	DependencyList	Dependency array to watch with deep comparison

Usage

typescript

import { useDeepCompareEffect } from '@modern-kit/react'

const Example = () => {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  // Regular useEffect runs every time the object reference changes
  useEffect(() => {
    console.log('useEffect ran');
  }, [user]);

  // useDeepCompareEffect runs only when the actual values change
  useDeepCompareEffect(() => {
    console.log('useDeepCompareEffect ran: values actually changed');
  }, [user]);

  return (
    <div>
      <p>Name: {user.name}, Age: {user.age}</p>
      <button onClick={() => setUser({ name: 'John', age: 30 })}>
        Update to John
      </button>
      <button onClick={() => setUser({ name: 'Jane', age: 25 })}>
        Update to Jane
      </button>
      <button onClick={() => setUser({ name: 'Bob', age: 35 })}>
        Update to Bob
      </button>
      <div>
        <p>useEffect run count: {effectCount}</p>
        <p>useDeepCompareEffect run count: {deepEffectCount}</p>
      </div>
    </div>
  );
}

Example

Current user: John, age 30

useEffect run count: 0 (every reference change)

useDeepCompareEffect run count: 0 (only when values change)

💡 Clicking "Update to John (same value)" will trigger useEffect but not useDeepCompareEffect.