React hooks

useCompare.js

import { useEffect, useRef } from 'react';
import isEqual from 'lodash/isEqual';

export const useCompare = (value) => {
  const prevValue = usePrevious(value);
  return !isEqual(prevValue, value);
};

export const usePrevious = (value) => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

useOutsideClick.js

import { useEffect } from 'react';

const useOutsideClick = (ref, onOutsideClick) => {
  function handleClickOutside(event) {
    if (ref.current && !ref.current.contains(event.target)) {
      onOutsideClick();
    }
  }

  useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  });
};

export default useOutsideClick;