useDeepCompareEffect

lifecycle

Installation

npx usehooks-cli@latest add use-deep-compare-effect

Description

A React hook that works like useEffect but performs deep comparison on dependencies instead of shallow comparison. Useful when dependencies are objects or arrays that might be recreated on each render.

Parameters

Name	Type	Default	Description
effect	React.EffectCallback	-	The effect function to run when dependencies change
deps?	React.DependencyList	-	Array of dependencies to deep compare

Examples

Object Dependencies

Using with object dependencies that are recreated on each render

const [user, setUser] = useState({ name: 'John', age: 30 });
const [settings, setSettings] = useState({ theme: 'dark', lang: 'en' });

// This would run on every render with regular useEffect
// because objects are recreated each time
useDeepCompareEffect(() => {
  console.log('User or settings changed');
  updateUserProfile(user, settings);
}, [user, settings]);

// Only runs when the actual content of user or settings changes
// not when the object references change

Array Dependencies

Preventing unnecessary effects with array dependencies

const [filters, setFilters] = useState(['active', 'verified']);
const [sortOrder, setSortOrder] = useState(['name', 'asc']);

useDeepCompareEffect(() => {
  // This effect only runs when the actual array contents change
  // not when new array instances are created
  fetchFilteredData(filters, sortOrder);
}, [filters, sortOrder]);

const addFilter = (newFilter) => {
  // Even though this creates a new array, the effect won't run
  // if the content is the same
  setFilters(prev => [...prev, newFilter]);
};

Complex Nested Objects

Deep comparison with nested object structures

const [config, setConfig] = useState({
  api: {
    baseUrl: 'https://api.example.com',
    timeout: 5000,
    headers: { 'Content-Type': 'application/json' }
  },
  features: {
    darkMode: true,
    notifications: ['email', 'push']
  }
});

useDeepCompareEffect(() => {
  // Only runs when the actual configuration values change
  // not when the config object is recreated
  initializeApp(config);
  
  return () => {
    cleanupApp();
  };
}, [config]);

// This won't trigger the effect if the values are the same
const updateConfig = () => {
  setConfig({
    api: {
      baseUrl: 'https://api.example.com', // same value
      timeout: 5000, // same value
      headers: { 'Content-Type': 'application/json' } // same value
    },
    features: {
      darkMode: true, // same value
      notifications: ['email', 'push'] // same array content
    }
  });
};

Dependencies

react

Notes

•Performs deep equality comparison on all dependency values
•More expensive than regular useEffect due to deep comparison overhead
•Use only when necessary - prefer restructuring to avoid object/array dependencies
•Handles nested objects, arrays, and primitive values correctly
•Comparison includes checking object keys, array lengths, and recursive value comparison
•Memoizes dependencies to prevent unnecessary re-computations

Implementation

"use client";

import { useEffect, useRef } from "react";

// Deep equality comparison function
function deepEqual(a: any, b: any): boolean {
  if (a === b) return true;

  if (a == null || b == null) return a === b;

  if (typeof a !== typeof b) return false;

  if (typeof a !== "object") return a === b;

  if (Array.isArray(a) !== Array.isArray(b)) return false;

  if (Array.isArray(a)) {
    if (a.length !== b.length) return false;
    for (let i = 0; i < a.length; i++) {
      if (!deepEqual(a[i], b[i])) return false;
    }
    return true;
  }

  const keysA = Object.keys(a);
  const keysB = Object.keys(b);

  if (keysA.length !== keysB.length) return false;

  for (const key of keysA) {
    if (!keysB.includes(key)) return false;
    if (!deepEqual(a[key], b[key])) return false;
  }

  return true;
}

// Deep compare dependencies
function useDeepCompareMemoize(value: React.DependencyList | undefined) {
  const ref = useRef<React.DependencyList | undefined>(undefined);

  if (!deepEqual(value, ref.current)) {
    ref.current = value;
  }

  return ref.current;
}

export function useDeepCompareEffect(
  effect: React.EffectCallback,
  deps?: React.DependencyList
): void {
  const memoizedDeps = useDeepCompareMemoize(deps);

  useEffect(effect, memoizedDeps);
}

export default useDeepCompareEffect;

useThrottle

CLI Docs All Hooks

useUpdateEffect