import { useEffect, useRef } from 'react';

function useWhyDidYouUpdate(componentName, props) {
  const prevProps = useRef(props);

  useEffect(() => {
    const allKeys = Object.keys({ ...prevProps.current, ...props });
    const changes = {};

    allKeys.forEach((key) => {
      if (prevProps.current[key] !== props[key]) {
        changes[key] = {
          from: prevProps.current[key],
          to: props[key],
        };
      }
    });

    if (Object.keys(changes).length > 0) {
      console.log(`🔍 ${componentName} re-rendered due to:`, changes);
    }

    prevProps.current = props;
  });
}
export default useWhyDidYouUpdate