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

Class Components Lifecycle

Developed with
QA

The course is part of this learning path

ReactJS: Zero to Hero
course-steps
14
certification
7
lab-steps
3
description
1
play-arrow
Start course
Overview
DifficultyIntermediate
Duration32m
Students173

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

- [Instructor] To understand component lifecycles it's first easier to look at class components. This is because the component lifecycle methods are built into them, we just override their implementation. The class component clock we are showing demonstrates how we can use a class component state and its lifecycle methods to display a ticking clock on the screen. Most obvious lifecycle method is the constructor, this is a mounting method in the render phase and it sets up the components props if it has any and its initial state. Once the initial render has completed if a component did mount method exists in the class this will be called... traditionally this is where we would have operated on the dome or made calls for external data as the component would have rendered. We could then get database synchronously and update state when it has been returned. The component did mount method in our code is used to set an interval running and this calls a method tick every second tick updates the time state within new value. This continues while the component is alive and you can see the clock updating in the browser. When a component has updated, if a component did update method exists this will be executed. This must have PrevProps as an argument and can obviously have PrevState and snapshot too. Again, this can be used to operate on the dominant make network calls for data. The advantage here is that you can use a conditional statement based on the previous props previous state or the snapshot to decide if this needs to happen. If you're going to set state in this method it must be wrapped in a conditional statement to prevent an infinite loop. The component did update method was not required in this application, but we included a blank implementation for completeness. The final life cycle method we're looking at is the component will amount method. If present is what we call it just before the component is completely removed from the dome it gives us a chance to do any cleanup we need to by unsubscribing clearing timers and so on. When we come to a mount in the class component clock we would want to clear the interval. So the process doesn't continue to hog resources. This is done in the component will amount method shown.

About the Author
Students4233
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