‚̧Numerous Packages Multiply

    @uplab/should-update

    1.2.1¬†‚Äʬ†Public¬†‚Äʬ†Published

    Install

    npm i --save @uplab/should-update
    

    Intro

    There is a time when a React Developer evolves to a Good React developer and decides to add shouldComponentUpdate to every component that cannot be PureComponent. In most cases ones shouldComponentUpdate function implementation looks similar to this:

    class DeathStar extends Component {
      shouldComponentUpdate(nextProps) {
        return (
          this.props.jedi.id !== nextProps.jedi.id ||
          this.props.jedi.name !== nextProps.jedi.name ||
          this.props.jedi.profile.firstName !== nextProps.jedi.profile.lastName
          // ... forevermore 
        );
      }
    }
    

    Solution

    This package is made to simplify the API for props and state comparison to a single function call. @uplab/should-update can deal with nested properties and accepts an array on dependencies that are presented as a path string (i.e. some.very.deeply.nested.data.and.even.array[0].items). It can track not only the props change, but a state changes.

    Example usage:

    import { createShouldUpdate } from '@uplab/should-update';
     
    class DeathStar extends Component {
      state = {
        formState: {
          firstName: 'Anakin',
          lastName: 'Skywalker',
        }
      }
      shouldComponentUpdate: createShouldUpdate({
        dependencies: ['jedi.id', 'jedi.name', 'jedi.profile.firstName'],
        stateDependencies: ['formState'],
      })
    }

    or

    import { shouldUpdate } from '@uplab/should-update';
     
    class DeathStar extends Component {
      state = {
        formState: {
          firstName: 'Anakin',
          lastName: 'Skywalker',
        }
      }
     
      shouldComponentUpdate(nextProps, nextState) {
        const dataChanged = shouldUpdate({
          dependencies: ['jedi.id', 'jedi.name', 'jedi.profile.firstName'],
          stateDependencies: ['formState'],
          state: this.state,
          props: this.props,
          nextProps,
          nextState,
        });
        // some custom stuff with dataChanged
      }
    }

    By default, if the resolved path is a type of object, then the deep comparison happens to check all the nested props. To avoid this behavior when you have complex and huge objects you can pass shallow: true prop:

    shouldComponentUpdate: createShouldUpdate({ dependencies: ['jedi.profile'], shallow: true, stateDependencies: ['formState'] })

    or

    shouldUpdate({
      dependencies: ['jedi.profile'],
      props: this.props,
      nextProps,
      shallow: true, //defaults to false
      stateDependencies: ['formState'],
      state: this.state,
      nextState,
    });

    API

    shouldUpdate(params)

    • @param {array} params.dependencies - array of pathes of the properties to depend on
    • @param {object} params.props - component props
    • @param {object} params.nextProps - component changed props. Can be previous or next props
    • @param {boolean} [params.shallow = false] - if true then the function will do shallow comparison.
    • @param {array} params.stateDependencies - array of pathes of the properties to depend on
    • @param {object} params.state - component state
    • @param {object} params.nextState - component changed state. Can be previous or next state

    Returns true if the component should update, else false.

    createShouldUpdate(params)

    Same as shouldUpdate, but without params.props and params.nextProps

    Install

    npm i @uplab/should-update

    DownloadsWeekly Downloads

    18

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    19.6 kB

    Total Files

    8

    Last publish

    Collaborators

    • stefanyshyn
    • ihorbarmak
    • kendirom
    • yrambler2001
    • vasyl.klym