Module 3 Recap

Here we'll recap what we've learned in Module 3

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

This lesson preview is part of the React Data Fetching: Beyond the Basics course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to React Data Fetching: Beyond the Basics, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course React Data Fetching: Beyond the Basics

  • [00:00 - 00:23] Okay, although the main focus of Module 3 was to fix Phrase conditions and network waterfalls, before we could do any of that, we needed to implement some simple refetching. In order to enable refetching, we had to add a refet function to the object that was returned by the use data hook, since the easiest way to replicate a race condition is to trigger a refetch.

    [00:24 - 00:42] So, with refetch in place, we could work on the race conditions issue which occurred when multiple refetches took place and took different times to resolve. This won't be a common issue for most applications, but it's nice to have a solution in place in case it happens.

    [00:43 - 00:55] We fix this by aborting a new request, if an old one is still in progress. So in this diagram, these blue bars over here are aborted requests because the new one has taken over.

    [00:56 - 01:15] Calls that were in progress, we gave a status of loading and the new requests, we gave them a status of idle. This was so that we could check if a request with the same key had a status of loading and if it did, we could use the abort controller to abort the old request in favour of the new one.

    [01:16 - 01:25] Then the new request had a status of loading. Then we focused on the network waterfalls issue and this happened when nested components were making their own requests.

    [01:26 - 01:46] We fix this by making requests concurrent instead of sequential where possible using the promise all settled method and we created a function called prefetch_multi which accepts an array of requests and adds the response to the cache. And that was a very quick recap of what we've achieved in this module.

    [01:47 - 02:01] If we take a look at the React documentation, we can see that in this module we 've done the two boxes in yellow, so that network waterfalls and race conditions. And in the previous module, we tackled the issue with preloading and data caching.

    [02:02 - 02:05] And our loader is around 70 lines of code. But there's more to do.

    [02:06 - 02:18] In the next module, we're going to refactor the code a bit but also work on a caching technique called stale while revalidated. This will refetch the data in the background and return the stale data in the meantime.

    [02:19 - 02:22] Don't worry if this doesn't make sense now, it will make much more sense in the next module.