This hook will not return anything. It will log into console, the changed props, from the previous render.

useTrailProp.js

/**
 * usage
 *
 * const MyComp = (props) => {
        useTraceUpdate(props)
        return <span />;
    };
*/
import { useRef, useEffect } from "react";

function useTraceUpdate (props) {
    const propRef = useRef(props);
    useEffect(() => {
        const changedProps = Object.entries(props).reduce((lookup, [key, value]) => {
            if (propRef.current[key] !== value) {
                lookup[key] = [propRef.current[key], value];
            }
            return lookup;
        }, {});
        if (Object.keys(changedProps).length > 0) {
            if (console.table) {
                console.table(changedProps);
            } else {
                console.log("Changed Props: ", changedProps);
            }
        }
        propRef.current = props;
    });
}

export { useTraceUpdate };