The React Component Lifecycle

The React Component Lifecycle has three phases. While rendering the component it goes through the mouting,updating and unmounting phases

Now the order of the methods of execution in each lifecycles are in particular order such as

 

The React Component Lifecycle

The react component life cycle

Mounting:

  • Component is being created and inserted into the DOM.\
  • Methods execution in following order
    1.constructor()
    2.static getDerivedStateFromProps()
    3.render()
    4.componentDidMount()

Updating:

  • An update can be caused by changes to props or state.
  • Any state or prop defined in the component changes it happen in this lifecycles.
  • The order of the execution of the component is as follow
    1.static getDerivedStateFromProps()
    2.shouldComponentUpdate()
    3.render()
    4.getSnapshotBeforeUpdate()
    5.componentDidUpdate()

Unmounting

  • This method is called when a component is being removed from the DOM:
  • only one method on unmounting is as follow
  • componentWillUnmount()

Leave a Reply

Your email address will not be published. Required fields are marked *