Have ideas to improve npm?Join in the discussion! »

    react-use-compare-debugger

    1.0.5 • Public • Published

    react-use-compare-debugger

    This React hook enables you to compare two different sets of props/state between re-renders. It's designed to aid with debugging to help determine why React components are re-rendering by offering a redux style console output.

    image

    It logs the name of the property, followed by both the previous and current values. Finally it renders a flag indicating whether the two values are referentially equal which is important to prevent un-necessary React re-renders.

    Installation

    npm install --save-dev react-use-compare-debugger

    Usage

    To use simply call the useCompareDebugger hook from a component where you want to log changes. For example:

    import useCompareDebugger from "react-use-compare-debugger";
    
    const myHelloWorldComponent = (props) => {
    
        useCompareDebugger("myHelloWorldComponent", props, ["deepNestedObject"])
    
        return (<div>Hello World</div>);
    }
    

    Parameters

    Parameter Type Required Description
    component String Should be the name of the component. This is used to group your logs together and help you know the source.
    value Object This is the object from this render, that you'd like to compare against the previous render.
    ignoreKeys Array An array of key names, used to ignore diving into deep/complex nested objects.

    Thanks

    Thanks to LogRocket - this was inspired by their blog post https://blog.logrocket.com/how-to-get-previous-props-state-with-react-hooks/ and a need for some debugging.

    Install

    npm i react-use-compare-debugger

    DownloadsWeekly Downloads

    6

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    12 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar