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

Component Lifecycle Overview

Developed with

The course is part of this learning path

ReactJS: Zero to Hero
Component Lifecycle Overview


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.  


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. 


We welcome all feedback and suggestions - please contact us at qa.elearningadmin@qa.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.

About the Author
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics