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

Making Requests for Data

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
Students172

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] We've established that the Use Effect hook, is the most appropriate place to make network requests. And we have a mock service to make the request to. The timeline to get this data is as follows. Initially, render the application with no data. Just have placeholders for it, a loading message, or reloading spinner. Once the initial render is complete, make a request for the data. We'll examine how we do that soon. When we have the requested data, we can call a state update function to trigger a re render of the component. Finally, we need to make sure that cyclic requests for data are not made during the updating phase. In the Filterable Courses Table, we have added a state of courses. Initially, it's an empty array. This will be the source of truth for the external data in the Application. The course is where we held in state, so we can update the Application when the data arrives. Initially, the Application renders with the message course data is loading. The conditional rendering shown on Lines 44 to 52 on the right hand side of the screen, make sure the course table only renders when courses is an array and that the array has a length of one or more. Joining the process, the state of course maybe set to a promise in the pending state. If we render it when this was the case, we would get an error and the Application wouldn't render at all. Once the data has loaded and the application has rendered, the user fact function will fire. You need to be aware that Use Effects callback was not allowed to be in asynchronous function at the time of recording. So we defined an asynchronous function outside of the callback to make the external call. This function is called Get Courses shown on Lines 13, 17, and it uses JavaScript fetch API to get the data from the specified URL. In our case, that's the Json server address for courses shown on Line 5. Once the response has resolved, we call the Json function on it and then return the result. The Json function returns a promise that resolves with the result of the passing the body text of the response is Json, hence the use of a white on the return courses decoration. It's worth noting that any statement that returns a promise should have an Await at the start of it and an asynchronized function. Once the problems has been resolved and the return course has been set to the data returned from the server, we can use this to set the course state in the Application. Once this is done, you know what happens next? We render in defin a reconciliation. Observing the rendering in the Application shows that the loading messages displayed will wrap the call ticket courses on Line 22 in a three second time out, so we could see that this happens. When the data eventually arrived, we can see that the course data is displayed correctly. However, this isn't the end of the story. One of the options in the developer tools is to highlight updates when components render. It's in the settings on the components App and I'm gonna turn it on now. With this check, we can say that the Application is re rendering about every three seconds. Can you see the link? If we switch to the console, taking note of the console log port on Line 20 of the code, we can see that the Use Effect Hook is being fired about every three seconds. That means that we are calling Get courses every three seconds. The state is updating about every three seconds. And the filter for courses component is re rendering about every three seconds. This is the site click calling for data we mentioned earlier, and now it seems like a good time to stop that happening. To do this, we need to let the Use Effect know that it doesn't need to fire again when it's already fetched the data. This is where the second argument for the Use Effect Hook comes in. If we specify an empty dependency array, React knows that the effect doesn't contain any data that's part of its data flow. And then it's safe to fire the effect just once. I did this argument to the Use Effect Call on Line 24 has the desired outcome. You can see now Use Effect Hook fires just once. After the first time, the Flexible Course Table is rendered. Our Application now successfully gets its data from an external source. For production, we would update the URL or have a production environment set up with the actual end point we would want to use.

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