tlareg / react-prev-props

Little utility to read previous props in getDerivedStateFromProps. It helps to fast replace depricated componentWillReceiveProps.

react-prev-props

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:

• react blog - you probably dont need derived state
• react blog - updating state based on props
• react docs - getDerivedStateFromProps
• react blog - 16.4 bugfix for getDerivedStateFromProps

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: 999, 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
  }

  ?
  • because: Anti-pattern: Erasing state when props change

License

MIT © tlareg