Hook that checks if a passed value has changed based on the provided equality function and returns the old instance of the * value if it has not changed

useDistinct.ts

import { isEqual } from 'lodash-es';
import { useEffect, useRef, useState } from 'react';

/**
 * Checks if a passed value has changed based on the provided equality function and returns the old instance of the
 * value if it has not changed.
 *
 * @param value The value that is compared.
 * @param equalFn A function that compares the old and the new value. Defaults to `lodash.isEqual`.
 */
export function useDistinct<T>(value: T, equalFn: (a: T, b: T) => boolean = isEqual) {
  const equalFnRef = useRef(equalFn);
  const [current, setCurrent] = useState(value);

  useEffect(() => {
    if (!equalFnRef.current(current, value)) {
      setCurrent(value);
    }
  }, [current, value]);

  return current;
}