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

In this lesson we explore how to handle loading and error states when it comes to fetching code, this is crucial for providing a better user experience.

The best way to do this is to assign a state value to the data depending on what's happening. So if it's loading, we can set the state to "loading", if it's errored, we can set the state to "error".

We can then manage these states with something like a switch statement or an object, which will also allow us to return the different values based on the state.

Let's start implementing this in our code...

 file, let's first create a function called 

// data-loader.js

export function prefetchOnEvent(key, fn) {
  // function logic...
}

function formatDataResponse() {} // new code

This function will contain the loading and error states.

function formatDataResponse({ status, payload }) {}

 that will return the correct object based on the status.

 object based on the different states. For example, if the status is "loading", return an object that indicates the loading state. Similarly, add properties for error and success states.

function formatDataResponse({ status, payload }) {
  const statusResponse = {
    loading: { isLoading: true },
    error: { error: payload },
    success: { data: payload },
  };
  return statusResponse[status];
}

 object that matches the status passed in as an argument.

This could have also been done with a switch statement, but using an object is more concise and easier to read.

Because we want to be able to destructure the object from our useData hook, we'll need to pass default values to the other properties. For example, the loading status will also need default values for error and data, which can be set to null.

 function to add the status and payload data to the cache. Set the status to "success" and give it a payload of data. Add a catch block to handle errors and return the error in the payload.

---
title: Loading and Error Handling
description: We'll learn how to handle loading and error states in our application
privateVideoUrl: https://stream.mux.com/l028Cdjpa00KhkJvxA7nZ202HjlncMPezkcBnKPPsHmMlI.m3u8
code: https://gitlab.com/fullstackio/books/newline-course-apps/richard-bray-create-a-custom-usefecther-component-in-react-app/-/tree/main/02.04
---

# Loading and Error Handling

In this lesson we explore how to handle loading and error states when it comes to fetching code, this is crucial for providing a better user experience.

The best way to do this is to assign a state value to the data depending on what's happening. So if it's loading, we can set the state to "loading", if it's errored, we can set the state to "error".

![Different states](https://d2uusema5elisf.cloudfront.net/courses/react-data-fetching-beyond-the-basics/module_02/lesson_02.04/public/assets/different_states.png)

We can then manage these states with something like a switch statement or an object, which will also allow us to return the different values based on the state.

Let's start implementing this in our code...

## Code Implementation

In out **data-loader.js** file, let's first create a function called `formatDataResponse` below the `prefetchOnEvent` function.

```js
// data-loader.js

export function prefetchOnEvent(key, fn) {
  // function logic...
}

function formatDataResponse() {} // new code
```

This function will contain the loading and error states.

In the `formatDataResponse` function, destructure the `status` and `payload` values as arguments.

```js
function formatDataResponse({ status, payload }) {}
```

Then we can create an object called `statusResponse` that will return the correct object based on the status.

Add properties to the `statusResponse` object based on the different states. For example, if the status is "loading", return an object that indicates the loading state. Similarly, add properties for error and success states.

```js
function formatDataResponse({ status, payload }) {
  const statusResponse = {
    loading: { isLoading: true },
    error: { error: payload },
    success: { data: payload },
  };
  return statusResponse[status];
}
```

Then we can return the `statusResponse` object that matches the status passed in as an argument.

:::note

This could have also been done with a switch statement, but using an object is more concise and easier to read.

:::

Because we want to be able to destructure the object from our useData hook, we'll need to pass default values to the other properties. For example, the loading status will also need default values for error and data, which can be set to null.

```js
function formatDataResponse({ status, payload }) {
  const defaultData = { isLoading: false, data: null, error: null };

  const statusResponse = {
    loading: { ...defaultData, isLoading: true },
    error: { ...defaultData, error: payload },
    success: { ...defaultData, data: payload },
  };
  return statusResponse[status];
}
```

Richard Oliver Bray

In the last lesson, we went through how to fetch data on an event.

But right now, we are manually handling the loading states and we're not even

Wouldn't it be nice if we could let the hook handle the loading and error

Well, that's what we're going to do in this lesson.

The best way to do this is to assign a status or a state to the data depending

So, if it's loading, we can set the state to loading and if it's error then we

We can manage these states with something like a switch statement or a

which will allow us to manage the states of data and return the correct state

Cool! Let's go into the code and start to implement this.

Let's first create a function below our prefect on event function called format

Let's press enter a few times after line 26 to give us some space and then on

we're going to write function, format, data, response.

We'll add parentheses and then curly braces.

This is going to create the object that will contain the loading and error

So what we're going to do is give each value in our data cache an object with a

This means each item will be an object that contains a status value and data

Because of that, we can destructure the status and payload values as arguments

response function. Then we can create an object which we're going to make a

response and this is going to return the correct object based on the status.

It may sound a bit confusing now but once I write the code it will make much

So if we have a status of loading then we want to return an object that's going

True! Let's add another property. So after line 30 we'll hit enter and add a

This is going to have a value of error and this will return the error as a

And finally we're going to have one more. We'll actually duplicate the last

and let's change error over here on line 32 to success. And then we can change

to data. Cool! And beneath that, so after our status response object we can

the status response that matches the status that is passed in as an argument.

Now because we want to be able to de-structure the object for our used data

pass default values to other properties. For example, the loading status here

will also need to have a value for error and data and these can both be null

have a value. So we can do this by creating a new variable which we're going to

data and this is going to equal an object with all the default values. So is

error will be null and data will also be null. Nice! Now on line 31 32 and 33

spread the default data object so that only the value that we want to change

Let's copy the default data variable and here all we have to do is write a

paste a variable and add a comma. So what's going on on this line line 31 is

spread out and only the is loading value here is changed from false to true.

on line 32 as well. So here after the error and after the opening value brace

paste and add a comma as well. Similarly on line 31 before the word data we can

paste and add a comma as well. Cool! Now that we have this we can update our

to add the status and payload data to the cache. So let's scroll up in this

line 18 and over here we're going to change data to an object that will contain

In this case we want this to be success and you want to give it a payload of

And now that we have a status we also have a way to handle errors in the code.

we can add a catch block on line 20 so at the end of the parentheses we'll

and then inside these parentheses we're going to add another set of parentheses

argument of error. Then we're going to add an error function, add curly braces

So what we want to do here when there's an error is the same as a success but

error in the payload. So let's copy all of line 18 and line 19 and we'll paste

Then where it says success will change to error and where it says data will

And while we're here we can add a console error just to tell the developer that

So here I'm going to add some backtext and say error prefetching data for key

dollar sign and curly braces and here we'll put the key in with a colon and add