# LifeCycle Methods -Part-1

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

![](/files/-LjEqIPX5WxLImInQYt3)

{% 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tkssharma.gitbook.io/react-training/day-06/lifecycle-methods-part-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.