Articles → REACT.JS → React Lifecycle

React Lifecycle

In this article, we will discuss the react lifecycle.

Phases Of The Component

In React, each component has 3 phases: -

Mounting means adding elements to the DOM. The following methods are called in the mounting phase: -

constructor() → This is the very first method called in the mounting phase. This method is used to initialize variable values
getDerivedStateFromProps() → This method is called just before the render method
render() → This method outputs the HTML on the browser
componentDidMount() → This method is called after the render method

Out of the above method, the render method is required and all other methods are optional.

This phase is invoked when the component is updated. The following methods are called in the updating phase: -

getDerivedStateFromProps()
shouldComponentUpdate() → Checks if the component output is affected by the change in the state or props
render()
getSnapshotBeforeUpdate() → This method is called before the update. Calling componentDidUpdate method is also required along with getSnapshotBeforeUpdate
componentDidUpdate() → This method is called when a component is updated

Unmounting means that the component is removed from the DOM. The following methods are called in the unmounting phase: -

componentWillUnmount() → This method is called when the component is about to be removed from the DOM

Query/Feedback