Deep compare version of useEffect for React

use-deep-effect.ts

import { useEffect, useMemo, useRef } from 'react'

import { isEqual } from 'lodash-es'

type UseEffectParams = Parameters<typeof useEffect>
type EffectCallback = UseEffectParams[0]
type DependencyList = UseEffectParams[1]
type UseEffectReturn = ReturnType<typeof useEffect>

const isPrimitive = (val: unknown) => {
  return val == null || /^[sbn]/.test(typeof val)
}

const checkDeps = (deps: DependencyList) => {
  if (!deps || !deps.length) {
    throw new Error('Use useEffect instead of useDeepEffect.')
  }
  if (deps.every(isPrimitive)) {
    throw new Error('Use useEffect instead of useDeepEffect.')
  }
}

/**
 * @param value the value to be memoized (usually a dependency list)
 * @returns a memoized version of the value as long as it remains deeply equal
 */
const useDeepCompareMemoize = <T>(value: T) => {
  const ref = useRef<T>(value)
  const signalRef = useRef<number>(0)

  if (!isEqual(value, ref.current)) {
    ref.current = value
    signalRef.current += 1
  }

  return useMemo(() => {
    return ref.current
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [signalRef.current])
}

const useDeepEffect = (callback: EffectCallback, dependencies: DependencyList): UseEffectReturn => {
  if (import.meta.env.DEV) {
    checkDeps(dependencies)
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  return useEffect(callback, useDeepCompareMemoize(dependencies))
}

export { useDeepEffect }