@restart/hooks/esm/useCustomEffect.js

A set of utility and general-purpose React hooks.

import { useRef, useEffect, useDebugValue } from 'react';
import useMounted from './useMounted';

/**
 * a useEffect() hook with customized depedency comparision
 *
 * @param effect The effect callback
 * @param dependencies A list of dependencies
 * @param isEqual A function comparing the next and previous dependencyLists
 */

/**
 * a useEffect() hook with customized depedency comparision
 *
 * @param effect The effect callback
 * @param dependencies A list of dependencies
 * @param options
 * @param options.isEqual A function comparing the next and previous dependencyLists
 * @param options.effectHook the underlying effect hook used, defaults to useEffect
 */

function useCustomEffect(effect, dependencies, isEqualOrOptions) {
  const isMounted = useMounted();
  const {
    isEqual,
    effectHook = useEffect
  } = typeof isEqualOrOptions === 'function' ? {
    isEqual: isEqualOrOptions
  } : isEqualOrOptions;
  const dependenciesRef = useRef();
  dependenciesRef.current = dependencies;
  const cleanupRef = useRef(null);
  effectHook(() => {
    // If the ref the is `null` it's either the first effect or the last effect
    // ran and was cleared, meaning _this_ update should run, b/c the equality
    // check failed on in the cleanup of the last effect.
    if (cleanupRef.current === null) {
      const cleanup = effect();
      cleanupRef.current = () => {
        if (isMounted() && isEqual(dependenciesRef.current, dependencies)) {
          return;
        }
        cleanupRef.current = null;
        if (cleanup) cleanup();
      };
    }
    return cleanupRef.current;
  });
  useDebugValue(effect);
}
export default useCustomEffect;