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

A Solution to Network Waterfalls & Race Conditions

Implement the Stale While Revalidate technique

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 explores a performance optimization technique known as route based prefetching. This technique improves the load times of web applications by fetching necessary data before it's needed.

A simple Pokemon application is used as an example to illustrate the concept. The application consists of a homepage displaying a list of Pokemon and a details page that provides specific details about a selected Pokemon.

To understand the need for route based prefetching, it's important to recognize a common problem in many web applications. In the Pokemon application, when a Pokemon is selected on the homepage to view its details, the data is fetched and displayed as expected. However, if the details page is refreshed, the data is no longer displayed.

This occurs because the data is only prefetched on the homepage, and there is no logic on the details page to fetch the data.

To address this issue, route based prefetching can be implemented in the 

// main.jsx

// Get the name of the Pokemon from the URL
const params = new URLSearchParams(window.location.search);
const name = params.get('name') ?? '';

// Prefetch data for both home and details page
const dataSources =[
  {
    key: 'pokemons',
    fn: () => getPokemons(),
  },
  {
    key: 'name',
    fn: () => getPokemonDetails(name),
  },
];

prefetchMulti(dataSources);

---
title: Prefetching Based on Page Route
description: Here we'll learn how to prefetch data based on the route
privateVideoUrl: https://stream.mux.com/Ndm56CGeCzLBQRfngKnQMuyn00yx59VX00ONgcam2Fk4s.m3u8
code: https://gitlab.com/fullstackio/books/newline-course-apps/richard-bray-create-a-custom-usefecther-component-in-react-app/-/tree/main/04.02
---

# Prefetching Based on Page Route

This lesson explores a performance optimization technique known as route based prefetching. This technique improves the load times of web applications by fetching necessary data before it's needed.

A simple Pokemon application is used as an example to illustrate the concept. The application consists of a homepage displaying a list of Pokemon and a details page that provides specific details about a selected Pokemon.

## Understanding the Problem

To understand the need for route based prefetching, it's important to recognize a common problem in many web applications. In the Pokemon application, when a Pokemon is selected on the homepage to view its details, the data is fetched and displayed as expected. However, if the details page is refreshed, the data is no longer displayed.

![Loading screen](https://d2uusema5elisf.cloudfront.net/courses/react-data-fetching-beyond-the-basics/module_04/lesson_04.02/public/assets/loading_screen.png)

This occurs because the data is only prefetched on the homepage, and there is no logic on the details page to fetch the data.

## Solution: Route Based Prefetching

To address this issue, route based prefetching can be implemented in the `main.jsx` file. Here's how it can be done:

```jsx
// main.jsx

// Get the name of the Pokemon from the URL
const params = new URLSearchParams(window.location.search);
const name = params.get('name') ?? '';

// Prefetch data for both home and details page
const dataSources =[
  {
    key: 'pokemons',
    fn: () => getPokemons(),
  },
  {
    key: 'name',
    fn: () => getPokemonDetails(name),
  },
];

Richard Oliver Bray

In this lesson, we're going to talk about something called root based prefetch

But let me first show you why we need this in the first place.

Again, let's load up our first Pokemon app.

And if we click on any Pokemon, say Charmander, we see the details page.

Now if we refresh this page, so press command or control R, you'll see that

We just see the loading text and no data comes up.

The reason this happens is because we've prefetched the data on events from the

But on this page, so in the details component, there's actually no logic to

Let's address this by going to our main.jsx file.

What we're going to do here is to use our prefetch multifunction to prefetch

This would mean that if we refresh the details page, the data for it would be

So we should see some data on our page below our prefetch data function on line

Let's press enter and we'll create a new variable called data sources.

This is going to be an array and it's going to contain two objects.

The first will have a key of Pokemon's and we'll have a function which should

Make sure that's imported properly on line five.

Then we'll add parentheses at a comma and we're going to create another object

We haven't yet created this name variable, but we will do later on.

Then this will have a function which will be an arrow function of get Pokemon

Again, make sure that's imported properly on line five and inside the

The name value is the name of the Pokemon that is clicked on which we can get

So again, online eight, we'll go to the end of the line, hit enter a few times

here we're going to create a new variable called params and this is going to

Then we'll add parentheses and in the parentheses will do window dot location

And beneath that, we're going to add a new variable called name and that's

the params dot gets at parentheses and in the parentheses will give us a string

Now after this parentheses, we're going to add the knowledge coalescing

then add a string before adding a semicolon.

This is because we may be on the homepage when this code runs and that means

So to avoid errors, we're going to set it to an empty string.

Now below data sources, online 21, we're going to add a semicolon.

We're going to hit enter and writes prefetch multi and then add parentheses and

Now we can go to the top of the file and we can get rid of the code online

We can also get rid of the import online six.

Now if we go to the browser and refresh this page, we can see the page is

If we right click on the page, go to inspect and then look at the network tab

the page again, we can see that as well as fetching the data for the details

It's also fetching data for the homepage.

This is what we expected, but if we never visit the homepage, we don't really

This is where URL based prefetching could come in handy.

Let's go back to the main.jsx file to implement this.

We'll first need to add a new property to the objects inside our data sources

So at the end of line 13, we're going to write to URL and we'll give this a

Then let's go down to the end of line 18, we'll do the same.

So we'll do URL and we'll give this a string of slash details, which is the

Then if we go down to our prefetch multifunction, at the end of the data

going to add another argument, which will be options.

I'm going to call it URL based prefetching.

This option hasn't yet been implemented in our data loader file.

Prefetching Based on Page Route

Masterclasses

Tutorials

Fullstack React with TypeScript