Use useWarningOnRefChangedButEqualDeepCompare

hooks.ts

import { useEffect } from 'react';
import isEqual from 'lodash-es/isEqual';

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

export const useWarningOnRefChangedButEqualDeepCompare = <T>(
  current: T,
  log: string
) => {
  const prev = usePrevious(current);

  useEffect(() => {
    if (
      prev !== undefined && 
      prev !== current && // are different refs
      isEqual(prev, current) // has same value
    ) {
      // eslint-disable-next-line no-console
      console.warn(`Ref changed but value is equal, ${log}`, current);
    }
  }, [current, log, prev]);
};