A react hook to figure out why a component is rendering

useWhyRender.tsx

/* tslint:disable:no-console */

import ld from 'lodash';
import React from 'react';

/**
 * Use this hook to figure out why a React component is re-rendering.
 * It will log if any properties in `props` have changed.  You should
 * also pass any state variables into `props` as well.
 *
 * @param props - The props passed to a react component.
 * @param options.disable - If true, do not profile this component.
 * @param options.name - A name to use for logging.
 */
export default function useWhyRerender(
    props: any,
    options: {
        disable?: boolean;
        name?: string;
    } = {}
) {
    const prefix = options.name ? `whyRender ${options.name}: ` : 'whyRender:';
    const oldProps = React.useRef(props);

    if (options.disable) {
        oldProps.current = props;
        return;
    }

    if (props === oldProps.current) {
        console.log(`${prefix} Props object is the same`);
        return;
    }

    const keys = Object.keys(props);
    const oldKeys = Object.keys(oldProps.current);
    if (ld.union(keys, oldKeys).length !== keys.length) {
        console.log(`${prefix} Prop keys changed`);
        oldProps.current = props;
        return;
    }

    const changes = [];
    for (const key of keys) {
        if (props[key] !== oldProps.current[key]) {
            changes.push(`${key}=${props[key]}`);
        }
    }
    if (changes.length > 0) {
        console.log(`${prefix} These props changed: ${changes}`);
        oldProps.current = props;
        return;
    }

    console.log(`${prefix} No changes - are you using 'React.memo()'?`);
    oldProps.current = props;
}