react-prev-props

0.0.1 • Public • Published

react-prev-props

NPM JavaScript Style Guide

Install

npm install --save react-prev-props

About

Little helper to read previous props in getDerivedStateFromProps. Previous props are saved in component local state. Before using this lib, make sure your really want to. Maybe there is better way. Please read:

How to use it?

Code example is best description.

Before:

UNSAFE_componentWillReceiveProps(nextProps) {
  const nextState = {};
 
  if (nextProps.value !== this.props.value) {
    nextState.value = nextProps.value;
  }
 
  if (nextProps.value2 !== this.props.value2) {
    nextState.value2 = nextProps.value2;
  }
 
  if (nextProps.value3 !== this.props.value3) {
    nextState.value3 = nextProps.value3;
  }
 
  this.setState(nextState);
}

After:

import { prevProps } from 'react-prev-props';
 
// ...
 
static getDerivedStateFromProps(nextProps, prevState) {
  const { nextState, changedProps } = prevProps(
    ['value', 'value2', 'value3'],
    { nextProps, prevState }
  );
 
  if (changedProps) {
    // props changed, we can insert some additional logic
    return {
      ...nextState,
      // we can reset state props with changed props
      ...changedProps,
    }
  }
 
  return nextState;
}

Or:

import { resetStateWithChangedProps } from 'react-prev-props';
 
// ...
 
static getDerivedStateFromProps(nextProps, prevState) {
  return resetStateWithChangedProps(
    ['value', 'value2', 'value3'],
    { nextProps, prevState }
  );
}

Or:

import { getDerivedStateFromPropsEnhanced } from 'react-prev-props';
 
// ...
 
static getDerivedStateFromProps(nextProps, prevState) {
  return getDerivedStateFromPropsEnhanced(
      ['value', 'value2', 'value3'],
      (nextProps, prevState, prevProps, changedProps = {}) => {
        const nextState = {};
 
        if (changedProps.hasOwnProperty('value')) {
          nextState.value = nextProps.value;
        }
 
        if (changedProps.hasOwnProperty('value2')) {
          nextState.value2 = nextProps.value2;
        }
 
        if (changedProps.hasOwnProperty('value3')) {
          nextState.value3 = nextProps.value3;
        }
 
        return Object.keys(nextState).length ? nextState : null;
    }
  )(nextProps, prevState);
}

How it works?

Prev props are cached in local state. Code example is best explanation.

import { prevProps } from 'react-prev-props';
 
// ...
 
static getDerivedStateFromProps(nextProps, prevState) {
  const { nextState, changedProps } = prevProps(
    ['value', 'value2', 'value3'],
    { nextProps, prevState }
  );
 
  console.log(prevState)
  // => {
  //   _prevProps: { value: 1, value2: 2, value3: 3 },
  //   value2: 2
  // }
 
  console.log(nextProps)
  // => { value: 1, value2: 999, value3: 3 };
 
  console.log(nextState)
  // => {
  //   _prevProps: { value: 1, value2: 999, value3: 3 },
  //   value2: 2
  // }
 
  console.log(changedProps)
  // => { value2: 999 }
 
  if (changedProps) {
    // props changed, we can insert some additional logic
    return {
      ...nextState,
      // we can reset state props with changed props
      ...changedProps,
    }
  }
 
  return nextState;
}

Or:

import { resetStateWithChangedProps } from 'react-prev-props';
 
// ...
 
static getDerivedStateFromProps(nextProps, prevState) {
  const nextState = resetStateWithChangedProps(
    ['value', 'value2', 'value3'],
    { nextProps, prevState }
  );
 
  console.log(prevState)
  // => {
  //   _prevProps: { value: 1, value2: 2, value3: 3 },
  //   value2: 2
  // }
 
  console.log(nextProps)
  // => { value: 1, value2: 999, value3: 3 };
 
  console.log(nextState)
  // => {
  //   _prevProps: { value: 1, value2: 2, value3: 3 },
  //   value2: 999
  // }
 
  return nextState;
}

API

@TODO

FAQ

  • why nextState can't just look like:
    nextState = {
      value: nextProps.value
    }
    instead of:
    nextState = {
      _prevProps: {
        value: nextProps.value
      },
      value: nextProps.value
    }
    ?

License

MIT © tlareg

Readme

Keywords

none

Package Sidebar

Install

npm i react-prev-props

Weekly Downloads

1

Version

0.0.1

License

MIT

Unpacked Size

23.5 kB

Total Files

6

Last publish

Collaborators

  • tlareg