The lifecycle of components is the series of methods that pass through different stages of the component’s existence. We can monitor and manipulate these different phases of the lifecycle. There are four main phases of the lifecycle:
This is the first phase where the props and state of a component are initialized inside the constructor() of a class.
Mounting is the phase of rendering the JSX elements in the DOM. the mounting phase has three methods that gets called:
getDerivedStateFromProps()render()componentDidMount()Updating is a phase when a component is updated. Whenever there is a change in the component's state or props,the component is updated. The updating phase has five methods that gets called during this phase.
getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()Unmounting is the final step of the component lifecycle where the component is removed or unmounted from the DOM.
The componentWillUnmount() is called while unmounting the component