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

In this lesson we'll discusses a strategy to prefetching and caching data based on events. This lesson revolves around a simple application displaying Pokémon data. Initially, the data for a specific Pokémon which is prefetched before the component loads. However, we can optimize this process further by initiating a fetch on an event such as a click or a mouse hover, let's go through the process.

To accomplish this, a function will be added to the 

 that prefetches the data on a specific event. This function, which will be called 

, and will take two arguments: the key (which is used to check the cache and store data) and the function to be executed to fetch the data when necessary. Here's how it looks:

// data-loader.js

export function prefetchOnEvent(key, fn) {
  // Check if the data is in the cache
  if (dataCache.has(key)) {
    // If data is in cache, just return it
    return;
  }
  // If data isn't in cache, fetch it and add to cache
  prefetchData(key, fun);
}

We can put this code below our prefetch function on line 

Now, let's incorporate this into the application. In the 

 component, data will be prefetched when the user hovers over a Pokémon's name. By adding an 

 event to the link component, data fetching will start as soon as the user's mouse enters the area.

// Home.jsx

<Link
  className="details"
  to={`/details?name=${pokemon.name}`}
  onMouseEnter={() => prefetchOnEvent(pokemon.name, () => getPokemonDetails(pokemon.name))}
>
  View Details
</Link>

---
title: Fetching Data on an Event
description: We will learn how to fetch data on an event
privateVideoUrl: https://stream.mux.com/9gmb3jCZxnryAi2MUBI7R78gXkt2cFpBI1OA2M8gGOM.m3u8
code: https://gitlab.com/fullstackio/books/newline-course-apps/richard-bray-create-a-custom-usefecther-component-in-react-app/-/tree/main/02.03
---

# Fetching Data on an Event

In this lesson we'll discusses a strategy to prefetching and caching data based on events. This lesson revolves around a simple application displaying Pokémon data. Initially, the data for a specific Pokémon which is prefetched before the component loads. However, we can optimize this process further by initiating a fetch on an event such as a click or a mouse hover, let's go through the process.

## Prefetching Data on Event

To accomplish this, a function will be added to the **data-loader.js** that prefetches the data on a specific event. This function, which will be called `prefetchOnEvent`, and will take two arguments: the key (which is used to check the cache and store data) and the function to be executed to fetch the data when necessary. Here's how it looks:

```js
// data-loader.js

export function prefetchOnEvent(key, fn) {
  // Check if the data is in the cache
  if (dataCache.has(key)) {
    // If data is in cache, just return it
    return;
  }
  // If data isn't in cache, fetch it and add to cache
  prefetchData(key, fun);
}
```

:::note

We can put this code below our prefetch function on line **14**.

:::

## Triggering Fetch on Event

Now, let's incorporate this into the application. In the `home` component, data will be prefetched when the user hovers over a Pokémon's name. By adding an `onMouseEnter` event to the link component, data fetching will start as soon as the user's mouse enters the area.

Richard Oliver Bray

In the last lesson, we added some simple caching to our data loader and in this

look at how to fetch data on an event and add it to the cache.

But let's first talk about why we might want to fetch data on an event.

Right now, our application is prefetching homepage data, but if we click on a

Pokémon, the data is being fetched only after the component has loaded with a

Since we already know the URL of the data we need to fetch, we can start fetch

click, so if I go back, we can start fetching when I click this button, or we

the data when we hover over this button, which will start the fetching process

Let's go into our code and implement this.

Just to heads up that in my previous videos, the format on save option was

but going forward, I'm going to turn it on so that whenever I save a file, it

Below our prefetch function on line 14, let's create a new function, so I'm

to the end of line 19, hit enter a few times and write export function, and we

Let's add parentheses and inside the parentheses, we're going to give it two

and function, and then let's add curly braces.

What we want to do here is to first check if the data is already in the cache

So inside the curly braces, let's hit enter, and in fact, I'm going to press

times, so we're not looking at the bottom of the screen.

And here on line 22, I'm going to write an gift statement and inside the

we're going to write data cache dot has add parentheses, and we're going to

So if it does have the key, then we just want to return.

And if data isn't in the cache, then we can run our prefetch data function.

So at the end of line 22, hit enter and write prefetch data.

And here we want to pass arguments of key and function.

Now let's go to our home component to trigger the fetch on hover, but scroll

link component, which should be online 21.

And here after the two prop, let's create a new prop.

And we're going to call this on mouse enter.

And to prevent us from strolling left and right on this page, I'm going to open

We're going to make our new prop equal curly braces.

And here we're going to give it an arrow function, which will run our prefetch

And this is going to take in two arguments, the key and the function we want to

So as I had parentheses, an R key is going to be Pokemon dot name.

And the function is going to be an arrow function that will run the get Pokemon

And this takes an argument, which would be our Pokemon dot name.

Before we check this in the browser, let's quickly run through what this is

So in our link component, if someone hovers over it, so on mouse enters, it's

run this function, which is our pre-fed on event, which takes a key, in this

Pokemon name and takes a function, which will fetch the Pokemon data.

First it's going to check if this key already exists in the cache.

And if it does, it will just return that data.

And if this key doesn't exist, then it's going to create a new entry in our

key and it's going to run this function and save this data inside our cache.

Make sure that both prefetch on event and get Pokemon details are imported

Now let's go ahead and test this in the browser.

So when the page loads, all Pokemon data is being fetched.

And if I hover over Ivysore, you can see that data is being fetched as well.

Now let's go ahead and update the code in our details component to use the

instead of fetching it again with the use effect hook.

Let's first copy all of line eight from the home component, since we're going

Now in the details component, at the end of line eight, press enter and paste

Let's change the word Pokemon to Pokemon and we can delete all the code on line

Fetching Data on an Event

Masterclasses

Tutorials

Fullstack React with TypeScript