# LifeCycle Methods -Part-2

In [React v16.3](https://reactjs.org/blog/2018/03/29/react-v-16-3.html), the `getDerivedStateFromProps` static lifecycle method was introduced as a replacement for `componentWillReceiveProps`. It’s important to move your components to this new method, as `componentWillReceiveProps` will soon be deprecated in an upcoming version of React.

Just like `componentWillReceiveProps`, `getDerivedStateFromProps` is invoked whenever a component receives new props.

### componentWillReceiveProps <a href="#componentwillreceiveprops" id="componentwillreceiveprops"></a>

Here’s a sample of what the old method would look like:

```
// For example purposes only, this is now deprecated

class List extends React.Component {
  componentWillReceiveProps(nextProps) {
    if (nextProps.selected !== this.props.selected) {
      this.setState({ selected: nextProps.selected });
      this.selectNew();
    }
  }
  // ...
}
```

As you can see, `componentWillReceiveProps` is often used to update the component’s state. It can also have side effects, such as the call to `this.selectNew()`.

### getDerivedStateFromProps <a href="#getderivedstatefromprops" id="getderivedstatefromprops"></a>

The new method works a bit differently:

```
class List extends React.Component {
  static getDerivedStateFromProps(props, state) {
    if (props.selected !== state.selected) {
      return {
        selected: props.selected,
      };
    }
    // Return null if the state hasn't changed
    return null;
  }
}
```

Instead of calling `setState` like in the first example, `getDerivedStateFromProps`simply returns an object containing the updated state. Notice that the function has no side-effects; this is intentional.

`getDerivedStateFromProps` may be called multiple times for a single update, so it’s important to avoid any side-effects. Instead, you should use `componentDidUpdate`, which executes only once after the component updates.

Here’s our final code:

```
class List extends React.Component {
  static getDerivedStateFromProps(props, state) {
    if (props.selected !== state.selected) {
      return {
        selected: props.selected,
      };
    }
    // Return null if the state hasn't changed
    return null;
  }
  componentDidUpdate(prevProps, prevState) {
    if (this.props.selected !== prevProps.selected) {
      this.selectNew();
    }
  }
}
```

### Wrapping Up <a href="#wrapping-up" id="wrapping-up"></a>

`getDerivedStateFromProps` improves on the older method by providing a function whose only purpose is to update the state based on prop changes, without any side effects. This makes the component as a whole much easier to reason about.