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
Duration31m
Students111

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

We've established that the useEffect hook is the most appropriate place to make network requests, and we have a mock service to make the request too. 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 a loading spinner. Once the initial render is complete, make a request for the data. We'll examine how we do that soon. When we're through requested data, we can call the 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 FilterableCoursesTable, we have added a state of courses. Initially, it's set to array. This will be the source of truth for the external data in the application. The courses will be held in states, so we cannot get 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, makes sure the course table only renders when courses is an array and that the array has a length of one or more. During the process, the state of course may be set to a promise in a pending state. If we rendered 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 useEffect function will fire. You need to be aware that useEffect's callback was not allowed to be an 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 getCourses, shown on lines 13 to 17, and it uses JavaScript's 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's json. Hence, the use of await on the returnedCourses declaration. It's worth noting that any statement that returns a promise should have an await at the start of it in an asynchronous function. Once the promise has been resolved, and the returnedCourses has been set to the data returned from the server, we can use this to set the course data in the application. Once this is done, you know what happens next. We render it, diff in a reconciliation. Observing the rendering in the application shows that the loading messages displayed. We wrap the call to getCourses on line 22 in a three second timeout, so you can see that this happens. When the data eventually arrives, 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 develop tools is to highlight updates when components render. It's in the settings on the component's app, and I'm going to turn it on now. With this check, we can see 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 call on line 20 of the code, we can see that the useEffect hook is being fired about every three seconds. That means that we're calling getCourses every three seconds. The state is updating about every three seconds, and the FilterableCourses component is re-rendering about every three seconds. This is the cyclic calling for data we mentioned earlier and now seems like a good time to stop that happening. To do this, we need to let the useEffect know that it doesn't need to fire again when it's already fetched the data. This is where the second argument for the useEffect hook comes in. If we specify an empty dependency array, React knows that the effect doesn't contain any data that's part of it's data flow, and then it's safe to fire the effect just once. Adding this argument to the useEffect call on line 24 has the desired outcome. You can see now that the useEffect hook fires just once. After the first time, the FilterableCoursesTable is rendered. Our application now successfully gets it's data from an external source. For production, we would update the URL or have a production environment set up with the actual input we would want to use.

About the Author
Students3014
Labs8
Courses29
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