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

How to use an Effect Dependency Array

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
Start course
Overview
Difficulty
Intermediate
Duration
32m
Students
252
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] So when would you use a variant in the dependency of AP useful? As an example, we might use a value to help construct a URL dependent on user inputs. To demonstrate this we've added a dropdown to the app that allows the user to choose a course ID and the associated code to make the app go and get the course with the ID from the server and display it correctly. A value of zero effectively means display all courses. The value from the dropdown sets a state called course ID. And this is used to construct the query part of a URL in the useEffect hook on line 22. This query is then passed into the getCourses, function and use as part of the URL in the fetch call on line 15. When we supply a query value at the end of a restful URL, we return a single object. We need to call setCourses with this as the single element in an array shown on line 17, to ensure that the courses is set as an array. Otherwise we get an error when we call array functions on courses later in the code. If we get more than one course returned, these are implicitly put into an array. You can see that the application renders just fine. Although we have a warning message on the console more on that in a moment. Changing the value in the dropdown box to a particular number, will update the value of course ID, but useEffect is not fired again. That's because of the empty array dependency, meaning it will only fire after the initial render. As you can see, the app pre-rendered, but there was no change to the list of courses. That warning message shown in the console is all about the dependencies in the userEffect hook. At the moment, the userEffect hook is only fired once, even though it thinks it should fire again. When the state of courseID updated, that's why we're getting the warning. Clearly the calling of the useEffect hook should depend on the course ID state In this example. The affect should only fire. If this value has changed adding this into dependency, array will make this happen. When this value here is added the array, you can see that the warning has now disappeared, selecting a value from the dropdown, updates, the state of course ID and hence, the course is to display. Although removing the dependency array would have got the same result. The effect would have fired on every re render thus making up app less efficient. So it's good practice to put any dependencies we can find in the array for the effect.

About the Author
Avatar
Ed Wright
Senior Learning Consultant
Students
7148
Labs
7
Courses
29
Learning Paths
7

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