react state debugger

react-state-debugger.tsx

/* eslint-disable */
import { useEffect, useRef } from 'react'
import _ from 'lodash'
function getObjectDiff([obj1, obj2]: [{ [key: string]: any }, { [key: string]: any }]) {
    const diff = Object.keys(obj1).reduce((result, key) => {
        if (!obj2.hasOwnProperty(key)) {
            result.push(key)
        } else if (_.isEqual(obj1[key], obj2[key])) {
            const resultKeyIndex = result.indexOf(key)
            result.splice(resultKeyIndex, 1)
        }
        return result
    }, Object.keys(obj2))

    return diff
}

export function useTraceUpdate(props: unknown, component?: string) {
    const prev = useRef(props)
    useEffect(() => {
        const changedProps = Object.entries(props as { [key: string]: unknown }).reduce((ps, [k, v]) => {
            if ((prev.current as { [key: string]: unknown })[k] !== v) {
                ps[k] = [(prev.current as { [key: string]: unknown })[k], v]
            }
            return ps
        }, {} as { [key: string]: [unknown, unknown] })
        if (Object.keys(changedProps).length > 0) {
            const diff = getObjectDiff([prev.current as { [key: string]: unknown }, props as { [key: string]: unknown }])
            console.log(component + ' changed props:', changedProps, diff)
        }
        prev.current = props
    })
}