npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-deep-equal-update

v1.0.2

Published

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

Downloads

3

Readme

@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.