New lifecycle methods react 16.3

In React 16.3 , we are going to introduce new component life-cycles. As per reactjs official doc, these life-cycle methods have replaced existing methods. < 16.3 react version lifecycle methods of react.
New life-cycle methods are:

  • getDerivedStateFromProps()
  • getSnapshotBeforeUpdate()

static getDerivedStateFromProps(nextProps, prevState) : There are many things in new lifecycle methods.

  • It replaced for both componentWillMount and componentWillReceiveProps.
  • It takes two parameter as like next props and previous state.
  • It returns an object to update state.
  • It returns null to indicate that the new props do not require any state updates.

getSnapshotBeforeUpdate() : There are many things in new lifecycle methods.

  • It is invoked right before the most recently rendered output is committed to the DOM.
  • It takes previous props and previous state as a parameter.
  • It enables your component to store 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().

Note : New life-cycle component methods is to support the asynchronous feature of react.

New lifecycle methods react 16.3

Deprecated methods are:

  • componentWillMount became, UNSAFE_componentWillMount
  • componentWillReceiveProps became, UNSAFE_componentWillReceiveProps
  • componentWillUpdate became, UNSAFE_componentWillUpdate

Above deprecated functions will be remove from react version 17.

Below example of new lifecycle methods react 16.3.

First you need to create the Hello.js file in your react application and copy and paste below code.

After that you need to create the Index.js file / App.js file and copy and paste below code.

 


Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of
Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.