ComponentWillReceiveProps Has Been Renamed

Answer :

It seems this has been reported to the maintainers already.

Now, as a consumer of an open source software, you may:

• wait for them to fix (or not fix) the problem


• be cool and submit a PR to fix it for them :) Here are all the references to componentWillReceiveProps in the repo


• find a new package to use

Ultimately, this isn't an error related to your software, but the dependencies it relies on. It isn't really your responsibility to fix those. If your app runs, it'll be fine. Warnings from react-dom.development.js won't appear in production.

Use getDerivedStateFromProps instead of componentWillReceiveProps

For example:

Before:

// Before
class ExampleComponent extends React.Component {
  state = {
    isScrollingDown: false,
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.currentRow !== nextProps.currentRow) {
      this.setState({
        isScrollingDown:
          nextProps.currentRow > this.props.currentRow,
      });
    }
  }
}

After:

// After
class ExampleComponent extends React.Component {
  // Initialize state in constructor,
  // Or with a property initializer.
  state = {
    isScrollingDown: false,
    lastRow: null,
  };

  static getDerivedStateFromProps(props, state) {
    if (props.currentRow !== state.lastRow) {
      return {
        isScrollingDown: props.currentRow > state.lastRow,
        lastRow: props.currentRow,
      };
    }

    // Return null to indicate no change to state.
    return null;
  }
}

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html