> For the complete documentation index, see [llms.txt](https://tkssharma.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tkssharma.gitbook.io/react-training/day-06/lifecycle-methods-part-1.md).

# LifeCycle Methods -Part-1

#### Here is our new Picture of LifeCycle Methods 

![](https://1949368877-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgMQu802me2gEI8E8bY%2F-LjEpfALI0_9aD0jD3en%2F-LjEqIPX5WxLImInQYt3%2FScreen%20Shot%202019-07-08%20at%2010.00.27%20AM.png?alt=media\&token=2aeb87b2-df9a-4f21-ab34-67b91cc8248d)

{% embed url="<https://codesandbox.io/s/getderivedstatefromprops-example-wvwq6>" %}

In React 16.3, new component life-cycles has been introduced. As per [*reactjs official doc*](https://reactjs.org/docs/react-component.html)*,* these life-cycle methods are replacing existing ones.

***New life-cycle methods are:***

* static *getDerivedStateFromProps()*
* *getSnapshotBeforeUpdate()*

***Deprecated methods are:***

* *componentWillMount* became, ***UNSAFE\_**&#x63;omponentWillMount*
* *componentWillReceiveProps* became, ***UNSAFE\_**&#x63;omponentWillReceiveProps*
* *componentWillUpdate* became, ***UNSAFE\_**&#x63;omponentWillUpdate*

These deprecated functions will be removed from react 17 version.

Let’s play with these new component life-cycles.

{% embed url="<https://codesandbox.io/s/interesting-bohr-9enkt>" %}

To understand the life-cycle functions, I have logged some text in side these functions. You can check the code. Here, we have two components. One is parent and another is it’s child. By clicking on “*Add Child Component*” button we can add the child component. We have separate buttons for updating the parent and the child individually.

Let’s start with adding a child component. When we click on the button to add the child, on the console we can see:console from google chrome — initial rendering

![](https://cdn-images-1.medium.com/max/1600/1*O_TZH3n3V3pimafNGdzvIg.jpeg)

Child get mounted. While mounting, it called functions in below sequence:

1. constructor
2. getDerivedStateFromProps
3. render
4. componentDidMount

Note that, getDerivedStateFromProps has been called during initial rendering. You can see the console, it is printing two objects. Here, I have logged two arguments of getDerivedStateFromProps.

```
static getDerivedStateFromProps(nextProps, prevState) {
     log("getDerivedStateFromProps from Child");
     log(nextProps);
     log(prevState);
     return null;
}
```

> Note:- During initial rendering, **nextProps** value will be a blank object in getDerivedStateFromProps.

Now, click on “Update Parent Component” button and check the log:console from google chrome — update parent component

![](https://cdn-images-1.medium.com/max/1600/1*9kM-JLBhcskKHbZJiKMU3w.jpeg)

> Note:- When we updated the parent component then also child component is calling **getDerivedStateFromProps** even if props have not changed.

So the sequence of calling these function while updating the parent component is:

1. getDerivedStateFromProps
2. shouldComponentUpdate
3. render
4. getSnapshotBeforeUpdate
5. componentDidUpdate

Now, click on “Update Child Component” button and see the log:![](https://cdn-images-1.medium.com/max/1600/1*oZvIOR9T8w__B6CCquay8g.jpeg)console from google chrome — update child component

As we can see in the console, when child component get updated, it goes through below life-cycle functions.

1. shouldComponentUpdate
2. render
3. getSnapshotBeforeUpdate
4. componentDidUpdate

**What we can see here**? Child component didn’t call the *getDerivedStateFromProps* while updating itself (in react v16.3)*.* Wow…interesting…isn’t it?

> In short, calling **`this.setState()`** generally **doesn’t trigger**`getDerivedStateFromProps().`**`(only in React v16.3)`**

We need to remember this point while using React v16.3.

#### **In React v16.4**, <a href="#id-6af7" id="id-6af7"></a>

Even if you call setState in child component, it will call `getDerivedStateFromProps()` before `shouldComponentUpdate()` .Update child in React v16.4

![](https://cdn-images-1.medium.com/max/1600/1*p7npZaFUKrCdRrMkFRXxzQ.jpeg)

***Let’s summarize these new life-cycle functions***

{% embed url="<https://codesandbox.io/s/peaceful-swanson-phs2v>" %}

`static getDerivedStateFromProps(nextProps, prevState)`

* It will be replacement for both *componentWillMount* and *componentWillReceiveProps.*
* It use to take next props and previous state as arguments.
* It should return an object to update state.
* And it should return null to indicate that the new props do not require any state updates.

***Edit**:*- There is some changes in React v16.4.0 for this life-cycle method. I will be updating this blog with these changes very soon.

`getSnapshotBeforeUpdate()`

* It is invoked right before the most recently rendered output is committed to the DOM.
* It takes previous props and previous state as an argument.
* It enables your component to capture current values, let say scroll position, before they are potentially changed.
* Any value returned by this life-cycle will be passed as a parameter to `componentDidUpdate()`.

**copy of -** [**https://medium.com/@sgobinda007/playing-with-component-lifecycle-methods-of-react-16-3-4c946c1e6982**](https://medium.com/@sgobinda007/playing-with-component-lifecycle-methods-of-react-16-3-4c946c1e6982)