- [Narrator] Any type of component, be it a class or a function has three lifecycle stages. These are mounting, updating and mounting, and each lifecycle stage has two phases. These are rendering and committing. The rendering phase is when the component is either being created or rear-ended. The rendering phase will be pure and have no side effects. This means that there will be no changes in state join this phase. This is how the component can be added or updated in the virtual DOM without any diffing or reconciliation interrupting the process. However, this phase can be paused aborted or restarted by reacting if it needs to. In the commit phase, reactable allow DOM interactions side effects and the scheduling of updates at the end of it. This is also the usual place to make network calls. In the mountain stage, join the rendering phase, a class component would call its constructor and then its render method for a functional component, the render and the return is interpreted. At the end of the rendering phase, the component enters the commit phase, reconciliation occurs and the actual DOM is updated. At the end of the commit phase, the component flags that is mounted and side-effects like setting state can be done to update the component. In the updating stage, three things can generally cause a component to rerender. These are new props being supplied to the component it state or context being updated correctly or false update being called. All of this practice is widely discouraged. The component rerenders with the new values, running the different algorithm and then passes into the commit phase. Reconciliation occurs updating the actual DOM and then the component flags that is updated and allows side-effects and Dominic simulation to occur. In the amounting stage, there is obviously no need for a render phase. The component flags that it's about to amount which allows any cleanup that is needed to be done before it is destroyed. The implementation of component life cycles in react was restricted to class components until the one with hooks was released. Let's let us have access to the lifecycle of functional components.