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 firstname.lastname@example.org to let us know what you think.
- [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.
Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.
Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.