Debug React component rendering with this JS hook (includes render count logging)

useComponentDebug.js

import { useEffect, useRef } from 'react';

const PREFIX = '[useComponentDebug]';

export default function useComponentDebug(componentName, props) {
    const prevProps = useRef({});

    console.count(`${PREFIX} ${componentName} render`);

    useEffect(() => {
        console.count(`${PREFIX} ${componentName} mount`);

        return () => console.count(`xxx ${componentName} unmount`);
    }, [componentName]);

    useEffect(() => {
        if (prevProps.current) {
            const allKeys = Object.keys({ ...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(
                    PREFIX,
                    componentName,
                    // changedProps
                    JSON.stringify(changedProps, null, 2)
                );
            }
        }

        prevProps.current = props;
    });
}