useDeepCompareEffect

Live Demo

Compare regular useEffect vs useDeepCompareEffect. Notice how regular useEffect fires on every render, while useDeepCompareEffect only fires when values actually change.

Code Examples

The Problem with Regular useEffect

import { useEffect, useState } from "react";

// ❌ This will cause infinite re-renders!
export default function BadExample() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    // This creates a new array reference every time
    const filters = { status: 'active', limit: 10 };
    
    fetchData(filters).then(setData);
  }, [{ status: 'active', limit: 10 }]); // New object every render!

  return <div>{data.length} items</div>;
}

Solution with useDeepCompareEffect

import { useDeepCompareEffect } from "@uiblock/hooks";
import { useState } from "react";

// ✅ This works correctly!
export default function GoodExample() {
  const [data, setData] = useState([]);
  
  useDeepCompareEffect(() => {
    const filters = { status: 'active', limit: 10 };
    
    fetchData(filters).then(setData);
  }, [{ status: 'active', limit: 10 }]); // Deep comparison!

  return <div>{data.length} items</div>;
}

Fetching Data with Complex Filters

import { useDeepCompareEffect } from "@uiblock/hooks";
import { useState } from "react";

interface Filters {
  search: string;
  categories: string[];
  priceRange: { min: number; max: number };
}

export default function ProductList() {
  const [products, setProducts] = useState([]);
  const [filters, setFilters] = useState<Filters>({
    search: '',
    categories: ['electronics'],
    priceRange: { min: 0, max: 1000 }
  });

  useDeepCompareEffect(() => {
    fetchProducts(filters).then(setProducts);
  }, [filters]);

  return (
    <div>
      <input
        value={filters.search}
        onChange={(e) => setFilters({ ...filters, search: e.target.value })}
      />
      {/* Products list */}
    </div>
  );
}

Array Dependencies

import { useDeepCompareEffect } from "@uiblock/hooks";
import { useState } from "react";

export default function SelectedItems() {
  const [selectedIds, setSelectedIds] = useState([1, 2, 3]);
  const [items, setItems] = useState([]);

  useDeepCompareEffect(() => {
    // Only fetches when selectedIds content actually changes
    fetchItemsByIds(selectedIds).then(setItems);
  }, [selectedIds]);

  return <div>{items.length} selected items</div>;
}

How It Works

Here's the implementation:

import { useEffect, useRef, DependencyList, EffectCallback } from 'react'

function deepEqual(a: any, b: any): boolean {
  if (a === b) return true
  if (a == null || b == null) return false
  if (typeof a !== 'object' || typeof b !== 'object') return false

  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
}

function useDeepCompareMemoize(value: DependencyList) {
  const ref = useRef<DependencyList>([])

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

  return ref.current
}

export function useDeepCompareEffect(
  effect: EffectCallback,
  dependencies: DependencyList
) {
  useEffect(effect, useDeepCompareMemoize(dependencies))
}

When to Use

API Reference

⚠️ Performance Note

Deep comparison has a performance cost. For very large or deeply nested objects, consider:

• Using useMemo to stabilize object references
• Breaking down into smaller, primitive dependencies
• Using a library like lodash.isEqual for more optimized comparison