[React] Refactor componentWillReceiveProps() to getDerivedStateFromProps() in React 16.3

Posted 2020-11-02 Answer1215

The componentWillReceiveProps() method is being deprecated in future version of React (17). Many of us use this method day-to-day to check for incoming prop changes, store state, and to invoke side effects like logging or fetching data from a server.

In this lesson, we‘ll look at how to refactor an existing component that uses componentWillReceiveProps() to instead use getDerivedStateFromProps() and componentDidUpdate().

Additional Resources: https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles

 

In short, 

componentWillReceiveProps: 

The new static getDerivedStateFromProps lifecycle is invoked after a component is instantiated as well as when it receives new props. It can return an object to update state, or null to indicate that the new props do not require any state updates.

should handle any local data changes:

  static getDerivedStateFromProps(nextProps, prevState) {
    const { number } = nextProps;

    return number === prevState.number
      ? { computedMessage: "Same number, try again!", number }
      : { computedMessage: null, number };
  }

 

componentDidUpdate:

hanlde any async update

  componentDidUpdate(nextProps) {
    const { number } = nextProps;
    if (this.state.computedMessage === null) {
      fakeServerRequest(this.props.number).then(result => {
        this.setState({ computedMessage: result });
      });
    }
  }

componentWillReceiveProps together with componentDidUpdate, this new lifecycle should cover all use cases for the legacy componentWillReceiveProps.