LifeCycle Methods -Part-1

Here is our new Picture of LifeCycle Methods

In React 16.3, new component life-cycles has been introduced. As per reactjs official doc, these life-cycle methods are replacing existing ones.

New life-cycle methods are:

• static getDerivedStateFromProps()

• getSnapshotBeforeUpdate()

Deprecated methods are:

• componentWillMount became, UNSAFE_componentWillMount

• componentWillReceiveProps became, UNSAFE_componentWillReceiveProps

• componentWillUpdate became, UNSAFE_componentWillUpdate

These deprecated functions will be removed from react 17 version.

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

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

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

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: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 triggergetDerivedStateFromProps().(only in React v16.3)

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

In React v16.4,

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

Let’s summarize these new life-cycle functions

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