How to use an Effect Dependency Array
The course is part of this learning path
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.
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
This learning path is aimed at all who wish to learn how to use the ReactJS framework.
We welcome all feedback and suggestions - please contact us at email@example.com to let us know what you think.
So when we're choosing a value, a dependency might be 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 courseID and the associated code to make the app go and get the course with that 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 courseID. And this is used to construct the query part of the URL in the user fact hook on line 22. This query is then passed into the "get courses" function, and used 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 set courses with this as the single element in an array shown on line 17, to ensure that the course 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 courseID, but use factors 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 is no change to the list of courses. That warning message shown in the console is all about the dependencies in the user fact hook. At the moment, the user fact hook is only fired once, even though it thinks it should fire again, when the state of courseID as updated, that's why we're getting the warning. Clearly, the calling of the user fact hook should depend on the courseID stated in this example. The effect should only fire if this value has changed. I think listing the dependency array will make this happen. When this value is added to the array you can see that the warning has now disappeared. Selecting a value from the dropdown updates the state of courseID and hence, the courses to display. Although removing the dependency array, would've got the same result, the effect would've fired on every re-render. Thus making our app less efficient, so it's good practice to put any dependencies we can find in the array for the effect.