Noah's Pairwise Manifest
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    react-immutable-pure-componentpublic

    npm version

    ImmutablePureComponent

    Unfortunately React.PureComponent is not embracing Immutable.js to it full potential. So here is my solution to this problem. npm package is parsed with babel so feel safe to use it from package repository or just copy it to your project and go from here.

    Here you will find a simple example of a problem it's solving.

    The ImmutablePureComponent extends component functionality by introducing:

    • updateOnProps
    • updateOnStates

    With those properties you can specify list of props or states that will be checked for changes. If value is undefined (default) then all props and state will be checked, otherwise array of strings is expected.

    This way component can react to property changes that matters. Useful when passing lambda function like this: <Component onChange={(e) => doWhatEver(e)}/>, that otherwise would trigger update every time.

    /*
      Copyright (C) 2017 Piotr Tomasz Monarski.
      Licensed under the MIT License (MIT), see
      https://github.com/Monar/react-immutable-pure-component
    */
     
    import React from 'react';
    import { is } from 'immutable';
     
     
    export class ImmutablePureComponent extends React.Component {
     
      shouldComponentUpdate(nextProps, nextState = {}) {
        const state = this.state || {};
     
        return !(this.updateOnProps || Object.keys({...nextProps, ...this.props})).every((p) => is(nextProps[p], this.props[p]))
          || !(this.updateOnStates || Object.keys({ ...nextState, ...state})).every((s) => is(nextState[s], state[s]));
      }
    }
     
    export default ImmutablePureComponent;

    install

    npm i react-immutable-pure-component

    Downloadsweekly downloads

    6,844

    version

    1.1.1

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar