26 lines
642 B
JavaScript
26 lines
642 B
JavaScript
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 |