Nationwide Polamorous Matrimony

    react-deep-equal-update

    1.0.2 • Public • Published

    @updateWhenNotDeepEqual

    Build Status Coverage Status npm version Dependencies img img

    A decorator that uses deep-equal to determine if a component should be re-render.

    How it works?

    Note: This documentation contains TypeScript examples but you should be able to use this library with Babel as well.

    Imagine that the props of a component have the following interface:

    interface TestProps {
        id: number;
        subprop1: {
            subprop11: {
                subprop111: {
                    value: string;
                },
                subprop112?: {
                    value: string;
                }
            },
            subprop12?: {
                subprop121: {
                    value: string;
                },
                subprop122?: {
                    value: string;
                }
            };
        };
    }
    

    If we want to re-render the component only when its properties change we would need to use a deep-equality check (or immutables) and implement the shouldComponentUpdate method.

    By default, shouldComponentUpdate always returns true to prevent subtle bugs when state is mutated in place, but if you are careful to always treat state as immutable and to read only from props and state in render() then you can override shouldComponentUpdate with an implementation that compares the old props and state to their replacements.

    This small module helps you to achieve that using a decorator named updateWhenNotDeepEqual:

    Working with properties

    import * as React from "react";
    import updateWhenNotDeepEqual from "../src/decorator";
    
    @updateWhenNotDeepEqual()
    class TestComponent extends React.Component<TestProps, void> {
    
        constructor(props: TestProps) {
            super(props);
        }
    
        public render() {
            return (<div></div>);
        }
    }
    

    Working with direct sub-properties

    If you just want to re-render the component when one of its direct sub-properties has been updated you can pass the name od the sup-property to the decorator:

    @updateWhenNotDeepEqual("subprop12")
    class TestComponent extends React.Component<TestProps, void> {
    
        constructor(props: TestProps) {
            super(props);
        }
    
        public render() {
            return (<div></div>);
        }
    }
    

    Working with deep sub-properties

    Finally, if you just want to re-render the component when one of its deep sub-properties has been updated you can pass the name od the sup-property to the decorator:

    @updateWhenNotDeepEqual((props: TestProps) => { return props.subprop1.subprop12.subprop121; })
    class TestComponent extends React.Component<TestProps, void> {
    
        constructor(props: TestProps) {
            super(props);
        }
    
        public render() {
            return (<div></div>);
        }
    }
    

    Note: The updateWhenNotDeepEqual decorator asumes that your components have properties and NO STATE the implementation of shouldComponentUpdate ignores the component's state.

    Install

    npm i react-deep-equal-update

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • remojansen