Module 4 Recap

[00:00 - 00:12] As usual, we've made a lot of improvements to our data fetching library. We first improved the performance by replacing our use date hook with the use sync external hook.

[00:13 - 00:30] This would automatically remove the vent listener when the component amounts. And also updating this hook reduced the amount of unnecessary re-renders since it only updates the component when the data it needs in the store is changed.

[00:31 - 00:50] Next, we implemented a feature called URL-based Pre-Fetching which allowed us to pre-fetch data based on the current URL. But this also revealed an issue in our library caused by re-freshing on the details page and then clicking on the back button to go to the home page.

[00:51 - 01:10] This happened because the re-fetch information, so the way to re-fetch data was stored inside the main.jsx file under the data sources array. So if the home page didn't contain a second argument explaining how to re-fetch the data, then it wouldn't know how to get the data in the first place.

[01:11 - 01:36] So to fix this, we implemented a way to save data sources inside memory when the Pre-Fetch_Morty function is called. We also created a function called fetch or use preloaded data which would check if data exists inside our preloaded data sources and use that function from there if one isn't provided inside our used data hook.

[01:37 - 02:01] This meant that if our home component didn't contain a second argument to fetch data, then it could use the data sources array which is stored in memory and get this function from there. So this means we don't have to add this as a second argument inside our used data hook if it already exists inside our data sources, and this change reduces the amount of duplicated code.

[02:02 - 02:18] So as long as the key is matched, then data should be fetched properly. Finally, we implemented a feature called stale_wahre_validate which allowed us to show stale data while fetching the latest data in the background.

[02:19 - 02:48] We did this by adding a new status called refetching which returns the previously stored data as a payload, but we also gave it a timestamp which we used to determine if the data was stale or not, and we only refetched the data if it was stale. So this meant our updated used data hook function would contain options like refetch on mount set to true and stale time set to 10 seconds.

[02:49 - 03:08] However, if the stale time option would not include it, then it would default to 5 seconds. As usual, I highly recommend going through everything we've covered in this module again until you understand it, and in the next and final module we're going to be concluding everything we've done in this course.

[03:09 - 03:29] [ no audio ]