1. Home
  2. Training Library
  3. Programming
  4. Courses
  5. React - Working with External Data

Component Lifecycle Overview

Developed with
QA

The course is part of this learning path

ReactJS: Zero to Hero
course-steps
14
certification
7
lab-steps
2
description
1
play-arrow
Component Lifecycle Overview
Overview
DifficultyIntermediate
Duration32m
Students191

Description

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.  

Learning Objectives 

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   

Intended Audience

This learning path is aimed at all who wish to learn how to use the ReactJS framework.  

Prerequisites

It is essential you understand the face of contemporary web development to attend this course. We insist upon JavaScript experience, along with good HTML and CSS skills. 

Feedback 

We welcome all feedback and suggestions - please contact us at qa.elearningadmin@qa.com to let us know what you think. 

Transcript

- [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.

About the Author
Students5165
Labs8
Courses29
Learning paths6

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

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.

Covered Topics