Component Lifecycle Overview
The course is part of this learning path
This module looks at how to work with External Data in React. You’ll be looking at Class Components, Effect Hooks, and how to handle data.
The objectives of this module are to provide you with an understanding of:
- The component lifecycle
- Hooks in React
- How to create restful services
- How to use an Effect Dependency Array
- How to hand errors in data requests
- How to send data
This learning path is aimed at all who wish to learn how to use the ReactJS framework.
We welcome all feedback and suggestions - please contact us at email@example.com to let us know what you think.
Any type of component, be it a class or a function, has three lifecycle stages. These are mounting, updating, and unmounting and each lifecycle stage has two phases. These are rendering and committing, the rendering phase is when the component is either being created or re-rendered, the rendering phase will be pure and have no side effects. This means that there will be no changes in state during 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 React if it needs to. In the commit phase, React will 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 mounting stage during the rendering phase, a class component would call its constructor and then its render method. For a functional component, the render in 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 inside effects like setting state can be done to update the component. In the updating stage, three things can generally cause a component to re-render. These are new props being supplied to the component, its state or context being updated correctly, or force update been called, all of this practice is widely discouraged. The component re-renders with the new values when in 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 a lot of side effects in DOM manipulation to occur. In the unmounting stage, there is obviously no need for render face. The component flags that it's about to unmount which allows any cleanup that is needed to be done before it is destroyed. The implementation of component lifecycle is in the app was restricted to class components until the one with hooks was released. This let us have access to the lifecycle of functional components.