Introduction to React Data Fetching Course

Course Introduction

Going through the problems with useEffect

What’s Wrong With useEffect?

Going through the problems with other libraries

Using Libraries or Frameworks for Data Fetching

Optimizing Your Dev Environment for this Course

Understand the problems with using the useEffect hook for data fetching, the pros and cons of using libraries and frameworks for data fetching.

Intro & Getting Started

We will learn how to fetch data before the component loads

Fetch Data Before you Component Loads

Here we'll learn how to create an efficient data cache

Creating an Efficient Data Cache

We will learn how to fetch data on an event

Fetching Data on an Event

We'll learn how to handle loading and error states in our application

Loading and Error Handling

Here we're going to recap what we've learned in Module 2

Module 2 Recap

Learn the benefits of prefetching data, how to create an efficient cache data to prevent refetching and also how to handle data fetching on an event.

Prefetching & Caching

Here we'll take a look at how to refetch data in a simple way

Simple Refetching

Here we'll learn how to fix race conditions

Fixing Race Conditions

Here we'll learn how to fix network waterfalls

Fixing Network Waterfalls

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

Module 3 Recap

Learn how to identify and fix two big issues with data fetching in React, Race Conditions and Network Waterfalls.

Race Conditions & Network Waterfalls

Here we'll learn how to use the useSyncExternalStore hook

The useSyncExternalStore Hook

Here we'll learn how to prefetch data based on the route

Prefetching Based on Page Route

This lesson, focus on saving and reusing prefetched data sources efficiently using context and a custom data-loading function.

Saving Data Sources

Stale While Revalidate

Module 4 Recap

Learn how the useSyncExternalStore hook can be used to improve the performance of our data fetching library. We'll also implement the stale-while-revalidate caching method.

Refactoring and SWR

Fetching on the Server

Final Words

Learn about how our data fetching library can be used in a server-side environment particularly with React Server Components.

Wrapping Up

Learn how to create a **small, efficient data fetching library** that will prefetch, cache your data as well as handle **error and loading states**, and even implement a caching technique called **stale-while-revalidate**.

### The Problem with Data Fetching in React

Data fetching is such a crucial part of building React apps and **most developers are doing it incorrectly**.

This is primarily because there are many videos and tutorials that show you how to fetch data using the useEffect hook, but also, because the [React documentation suggests it](https://react.dev/reference/react/useEffect#fetching-data-with-effects).

But then goes on to specify [all the problems with using it](https://react.dev/reference/react/useEffect#what-are-good-alternatives-to-data-fetching-in-effects) such as:

- Effects don’t run on the server

- Effects makes it easy to create “network waterfalls”

- Effects usually means you don’t preload or cache data

- It’s not very ergonomic

So for small projects, maybe the useEffect hook is fine, but for medium to larger projects it definitely should not be an option for data fetching.

You could go ahead and use one of the many popular frameworks and libraries for doing this, but they have **a lot of features** and a lot of **magic behind the scenes** that you may not need.

Also, because they are libraries, you may not be able to **customise them to your specific needs**.

### How Does _This Course_ Help?

In this course you will learn how to build a data fetching library **from scratch**.

That's right, you'll start with an **empty file**, understand every single line of code that you write. And end up with a **single-file library** that will be able to; **prefetch and cache your data** in a performant way, **handle loading and error states**, and also implement a caching technique called **stale-while-revalidate**, which will refetch new data in the background while still showing the old data.

But that's not all...

This library will also address two big issues with data fetching in React, [race conditions](https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect) and [network waterfalls](https://blog.sentry.io/fetch-waterfall-in-react/).

If you haven't heard or encountered these issues before, you're lucky. But in case you do, this library will have you covered.

No matter if you want to get a better understanding of how data fetching in React works, if you want to build a custom data fetching solution for your next project, or if you want to build the next [TanStack Query](https://tanstack.com/query/latest), this course will help you do all those things and much more.

### Course Content Overview
Course Overview: Total Modules: **5** Total Lessons: **20** Total Video Runtime: **2 hours, 40 minutes**

Implement prefetching, caching and stale-while-revalidate with the useSyncExternalStore hook

This course will teach you how to fetch in a performant way for React without relying on a third-party library or the useEffect hook. We will build a custom data fetching library from scratch that will prefetch, cache, and address all the common issues with fetching data.

React Data Fetching: Beyond the Basics

How React re-renders when data is fetched

What the problems are with using useEffect to fetch data

The pros and cons of using **libraries and frameworks for data fetching**

How to start fetching data **before your React component loads**

How to create a **data cache** to prevent data being refetched

How to identify and fix **Network Waterfalls and Race Conditions**

When and why to use the **useSyncExternalStore hook**

How tin implement the **stale-while-revalidate** caching method

How data fetching for **React Server Components** can be achieved

This lesson guides readers through the process of streamlining React data fetching and caching strategies and addresses the final issue that needs to be resolved before implementing the 'stale while we validate'.

This involves saving prefetch data sources to eliminate unnecessary code duplication and improve data fetching efficiency.

The current application includes a function in 

 that prefetches all Pokemon data. A similar function exists inside the use data hook in the Home component. However, duplicating the code unnecessarily can be avoided if we fetch a default amount of Pokemon data only when necessary.

To address this issue, we can save the data sources from 

, including the functions, inside our data cache. This way, when we want to refetch the data without a callback function, we can simply call it again since the callback function is saved in the cache.

This fetches data from an external source and saves it in the cache.

To implement this, we need to make changes to our data loader file. Below our data cache variable, we create a new variable called 

 argument being passed into this function. This way, the data sources array from the main.jsx file is saved in memory, and our data loader file has access to them.

// data-loader.js

let preloadedDataSources = [];

// other functions...

export function prefetchMulti(dataSources, options) {
    preloadedDataSources = dataSources;
    // Rest of the function...
}

---
title: Saving Data Sources
description: This lesson, focus on saving and reusing prefetched data sources efficiently using context and a custom data-loading function.
privateVideoUrl: https://stream.mux.com/haUp9IAyvSgs2xrImNPalJkMrCNfEpP5hFls85t6YuI.m3u8
code: https://gitlab.com/fullstackio/books/newline-course-apps/richard-bray-create-a-custom-usefecther-component-in-react-app/-/tree/main/04.03
---

# Saving Data Sources

This lesson guides readers through the process of streamlining React data fetching and caching strategies and addresses the final issue that needs to be resolved before implementing the 'stale while we validate'.

This involves saving prefetch data sources to eliminate unnecessary code duplication and improve data fetching efficiency.

## Handling Unnecessary Duplication

The current application includes a function in `main.jsx` that prefetches all Pokemon data. A similar function exists inside the use data hook in the Home component. However, duplicating the code unnecessarily can be avoided if we fetch a default amount of Pokemon data only when necessary.

![Current way of fetching data](https://d2uusema5elisf.cloudfront.net/courses/react-data-fetching-beyond-the-basics/module_04/lesson_04.03/public/assets/curren_fetching.png)

To address this issue, we can save the data sources from `main.jsx`, including the functions, inside our data cache. This way, when we want to refetch the data without a callback function, we can simply call it again since the callback function is saved in the cache.

![New way of fetching data](https://d2uusema5elisf.cloudfront.net/courses/react-data-fetching-beyond-the-basics/module_04/lesson_04.03/public/assets/new_better_fetching.png)

This fetches data from an external source and saves it in the cache.

## Implementation

To implement this, we need to make changes to our data loader file. Below our data cache variable, we create a new variable called `preloadedDataSources`, initially set as an empty array.

Now, in our `prefetchMulti` function, we assign our `preloadedDataSources` function to the `dataSources` argument being passed into this function. This way, the data sources array from the main.jsx file is saved in memory, and our data loader file has access to them.

```js
// data-loader.js

let preloadedDataSources = [];

Richard Oliver Bray

This is the final issue we have to fix before we can implement stale while we

But first, let's talk about why we want to do that.

Let's take a look at the code in our app.

Right now in the main.jsx file, we have a function here on line 13 that will

And if we look at our home component, we have a similar function inside the use

hook, so over here where we have get Pokemon and the random limit argument.

This function is used to make the refetch button all the way down here, on line

But imagine if we scroll up to line 9, imagine if we didn't want to change the

Pokemon fetch each time we clicked and we just wanted to refetch the default

That would mean this code here seems like an unnecessary duplication.

What happens right now when the main.jsx file loads, so when I upload, it gets

from our data sources, makes the fetch calls and saves the data inside the data

So if our home page leaves data, it goes to our data load function, and then

But if we didn't have any data in the cache, or we wanted to update the data in

when we clicked on the refetch button without a callback argument, then our

code wouldn't know how to refetch that data, since it doesn't have access to

anymore, which is inside our main.jsx file.

So if we wanted to fix that, what we could do is get the data sources from our

file, including the functions, and save all of that inside our data cache.

This means that whenever we want to refetch the data without a callback

the callback function is saved inside our cache, we can just call it again,

make the fetch to an external source and save the data in the cache.

Let's go ahead and implement this inside our data loader file.

Beneath our data cache variable, so at the end of line three, let's create a

called preloaded data sources, and this is going to equal an empty array.

Now let's scroll down to our pre-fetch multi function all the way online 52,

end of line 52, we're going to hit enter, and assign our preloaded data sources

to the data sources argument that's passed into this function.

Now the data sources array from the main.jsx file is saved in memory, and our

Scroll to the bottom of this file, press enter a few times, and on line 85, we

create a new function called fetch or use preloaded data.

This is going to have two arguments, one of key and one of function.

Basically, what this function is going to do is check our preloaded data

to find out if the key we pass in as an argument has a matching data source.

If it does, then we can run the prevex data function with that key and the pre

data source, or we could use the function that's passed into this argument.

I know this sounds confusing now, but it will make much more sense when we

So let's open up this function and we'll create a new constant variable called

data source, and this is going to equal our preloaded data sources variable.

But we're going to use the find method to find a data source that has the same

so we'll write data source dot key as the key we pass into this argument.

And then we're going to run the prevex data function with an argument of the

passed in and the argument of the function that passed in.

But if no function is passed in, then the keys the function from our preloaded

So we're going to use optional training and then write fm.

Now, let's update our code to make use of this new function.

First, I'm going to double click on the function name and press command C to

scroll up all the way to our refetch function over here.

And we're going to change prevex data on line 72 with our fetch or use pre

Let's also scroll up to the prevex on event function, which is on line 47.

And let's change prevex data on line 49 to fetch or use preloaded data.

Finally, let's scroll all the way up to our use data hook.

And on line six, if you have it, let's remove the default value in fm since it

Now, let's test this by changing the code in our home component.

On line nine, let's remove all the code from the second argument, just leaving

And also, let's make one small change to the details component.