WhyDidYouUpdate react class component helper

whyDidYouUpdate.js

function comparePrevPropsAndState(prevProps, prevState, logName) {
    try {
        const defaultLogName = `${this.constructor?.name || ''} Updated:`.trim();
        const allPropsKeys = Object.keys(Object.assign({}, prevProps, this.props));
        const allStateKeys = Object.keys(Object.assign({}, prevState, this.state));
        const changesObj = { props: {}, state: {} };

        let somethingChange = false;
        for (let [keys, prev, currStore] of [
            [allPropsKeys, prevProps, 'props'],
            [allStateKeys, prevState, 'state'],
        ]) {
            for (let i = 0; i < keys.length; i++) {
                let key = keys[i];
                if (prev[key] !== this[currStore][key]) {
                    somethingChange = true;
                    changesObj[currStore][key] = {
                        from: prev[key],
                        to: this[currStore][key],
                    };
                }
            }
        }

        // If changesObj not empty then output to console
        if (somethingChange) {
            console.log(logName || defaultLogName, changesObj);
        }
    } catch (err) {
        console.warning('Failed to determine render changes:', err);
    }
}

class SomeComponent extends React.Component {
    // ...
    componentDidUpdate(prevProps, prevState) {
        // You need to `.call()` the function and pass in the component's `this` as the context.
        comparePrevPropsAndState.call(this, prevProps, prevState /*, "Optional log, otherwise component name will be used" */);
    }
}