React Component Lifecycle Methods (New Methods Covered)

We can think of React component lifecycle methods as the sequence of activities that occur from the birth of a component of React to its death.

Three phases of React component lifecycle-

1. Mounting
2. Updating
3. Unmounting

Now let’s discuss each phase of the React Component Lifecycle methods.

Mounting

Mounting of components is like introducing a newborn child to the world. This is the initial phase of component and component is mounted on DOM (Document Object Model) and rendered for the first time.

Mounting Lifecycle Methods:

Constructor(props): This is a special function that is called when new components are created

In this, we initialize the state or props of the component. Here we can bind the Event Handlers. In the constructor, we cannot make any API call ex.HTTP request.

ComponentWillMount(): This function is called immediately before mounting occurs. It is called right before the first rendering is performed.

It is very essential to note that calling setState within this method will not cause re-render.

componentDidMount(): This method is called right after the react component is mounted on DOM or you can say that it is called right after render method executed for the first time.

Here we can make API call Example: Interact with dom or perform any ajax call to load data.

Where should you call API?

You can make an API call in componentDidMount.

For a better understanding of which methods to be called in the Mounting phase let us have a look at this snapshot.

Fig. 1 Mounting Phase

Updating

Updation is a phase when a component state or props get updated. The component is re-rendered whenever a change is made to react component’s state or props, you can simply say that the component is updated.

Update Life cycle methods are given below-

Props Changes

State Changes

componentWillRecieveProps(): This function is called when a component receives new props useful for setting state with new props will not cause re-render.

shouldComponentUpdate(): By default, or in most cases, if the state or props change, you’ll want a component to re-render. You have control over this behavior though. In this react component lifecycle method, you can return true or false and control whether component gets re-rendered or not depending on change in state or props.

This react component lifecycle method is used for optimizing performance.

componentWillupdate(): This is executed only after shouldComponentUpdate returns true. componentWillupdate() method is called before the component is re-rendered after updating state or props.

This method has two arguments-

1-nextProps

2-nextState

componentDidUpdate(): componentDidUpdate is final method in Update react component lifecycle method.

• This method is called immediately after updating occurs.
• And is not called for initial rendering.
• It accepts two parameters prevProps, prevState.
• This method is guaranteed to be called only once in each re-render cycle.

We can make API call but before making the call you need to compare previous props with the new props and then decide whether to make ajax call or not.

Fig 2- Updating Phase

Unmounting

This is the final stage of the react component lifecycle method which is an unmounting component from DOM.

1. componentWillUnmount(): This method is called immediately before the component is Unmounted and destroyed from DOM. In this method we can perform some cleanup tasks like canceling any network request, removing event handlers.

Newly added methods in React component lifecycle.

Let’s discuss them too.

1. getDerivedFromProps(): This is safer alternative to earlier lifecycle method componentWillRecieveProps.It is called just before the rendering method is called.

• It’s a static function that does not have access to “this’’. It will return an object to update the state whenever props change. It will return null if there is no change to the state.

1. getSnapshotBeforeUpdate(): This is a safer alternative to earlier lifecycle method componentWillUpdate.This method is invoked right before DOM is updated.

• This method will either return null or return a value.
• The return value from getSnapshotbeforeUpdate is passed to componentDidUpdate as a third parameter.

React Component lifecycle methods allow us to conduct certain activities whenever the component is created and destroyed. It is very helpful as it tells the developer when to use which react component lifecycle methods depending upon the requirements.

Keep reading and Keep learning!!!

If you’ve any doubts, please let us know!!

ReactJS Development Services

Let CronJ assist you..!

Thank you !!!