- [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.