A react component has certain lifecycle methods in which we can insert our own code and execute it at a particular moment during the lifecycle of the component. A react component can go through different sets of lifecycle methods depending upon in which phase the component is. These Phases are Mounting, Updating, and Unmounting.

Mounting

Following is the order of execution for the methods, when the component is created and inserted into the real DOM:

• constructor()
• getDerivedStateFromProps()
• render()
• componentDidMount()

Note: When we talk about mounting, we’re talking about the process of converting the virtual components into actual DOM elements that are placed in the DOM by React.

Flow diagram for mounting phase

#react #reactjs #lifecycle #react components