ahooks/es/useWhyDidYouUpdate/index.js

react hooks library

import { useEffect, useRef } from 'react';
function useWhyDidYouUpdate(componentName, props) {
    const prevProps = useRef({});
    useEffect(() => {
        if (prevProps.current) {
            const allKeys = Object.keys(Object.assign(Object.assign({}, prevProps.current), props));
            const changedProps = {};
            allKeys.forEach((key) => {
                if (!Object.is(prevProps.current[key], props[key])) {
                    changedProps[key] = {
                        from: prevProps.current[key],
                        to: props[key],
                    };
                }
            });
            if (Object.keys(changedProps).length) {
                console.log('[why-did-you-update]', componentName, changedProps);
            }
        }
        prevProps.current = props;
    });
}
export default useWhyDidYouUpdate;