Stay connected

Trending News

By using our website, you agree to the use of our cookies.

Blog Post

React Component Lifecycle Methods (New Methods Covered)
React.js

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:

 

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.

 

mounting react component lifecycle

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

Update Life cycle methods prop changes

 

State Changes

Update Life cycle methods 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.

 

updating phase react component lifecycle methods

Fig 2- Updating Phase

                         

Unmounting

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

Unmounting react component lifecycle methods

 

  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!!

Follow Us on Facebook | Twitter | LinkedIn.

Let CronJ assist you..!

Thank you !!!

Related posts

Copyright @2019 by CronJ. All rights reserved. Terms and Conditions, Privacy Policy

fREE tRIAL

**No Credit Card Needed** Try One Week FREE Trial of Hiring Our Dedicated Developers! Get Daily Time sheets. Have daily meetings with Developer over Voice or Video Call.

Cronj Logo

CronJ

As a next-generation growing Information technology company, we partner with every developing or developed brand to help them build a profitable business.