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

Fetching data is a crucial part of web applications. Developers often rely on libraries to get this done. However, while these tools can be beneficial, they also come with their own set of challenges. In this lesson we go though some reasons why you might want to reconsider using a library for data fetching.

Let's go through three reasons why you might not want to use a library for data fetching:

This issue can be particularly problematic for sectors like finance, health, and government, which require rigorous security controls.

---
title: Using Libraries or Frameworks for Data Fetching
description: Going through the problems with other libraries
privateVideoUrl: https://stream.mux.com/4LeBu94g7KSIdK2Gdpny1fRmMzzwTaLCD6Xc2SMEbRQ.m3u8
role: "INTRODUCTION"
isPublicLesson: true
---

# Using Libraries or Frameworks for Data Fetching

Fetching data is a crucial part of web applications. Developers often rely on libraries to get this done. However, while these tools can be beneficial, they also come with their own set of challenges. In this lesson we go though some reasons why you might want to reconsider using a library for data fetching.

## You may not want to use a library

Let's go through three reasons why you might not want to use a library for data fetching:

-   **The maintenance status of libraries can change over time**: A library that is well-maintained today might not be so in the future. If there is a security issue with the library, you would have to wait for the maintainers to rectify it, which could potentially leaving your app vulnerable.

This issue can be particularly problematic for sectors like finance, health, and government, which require rigorous security controls.

-   **Libraries may lack the flexibility needed for certain projects**: If the library doesn't support contain feature needed for the project, you would need to put in a request for the maintainers to add it, or you would need to fork the library and add the feature yourselves, which could take time.
-   **Libraries can add extra, unnecessary code to an app**: Particularly if only a small feature set of the library is being used. Modern bundlers like [Vite](https://vitejs.dev/) or [Turbo Pack](https://turbo.build/pack) have tree-shaking built in, but if the library hasn't been written with tree-shaking in mind, or if a modern bundler isn't being used, a lot of code could be added to the app.

Richard Oliver Bray

We've previously spoken about why you shouldn't use the Use Effect hook for

and in this video we're going to talk about why you might not want to use a

Libraries in general are a great way to add functionality to your app very

most of them are really well maintained, but there are a few reasons why you

The first reason is that they might not be well maintained, and a library that

maintained now might not be well maintained in the future.

If there's an issue with security in the library that you're using, then you'll

This could take a while, and in the meantime, your app could be at risk.

If you work in finance, health, government, or any of those security conscious

In fact, this was a problem in a finance company I worked at in the past.

We used a static analysis tool to check for security issues in our code and

and because we used a lot of packages, some of these packages had security

We either had to get a different package or declare that it was a known issue,

was a really long and somewhat embarrassing process.

The second reason that you might not want to use a library is that libraries

Imagine that you're using a library to fetch data, and you have to do something

You either have to file an issue and wait for the maintainers to add it, or you

This is an ideal since you could miss out on important updates from the library

A third reason you may not want to use a library for data fetching is that it

Now, I don't want to pick on a specific library, but I do know that these data

If you're only using a small feature set of that library, like you're doing

data fetching, then you could be adding a lot of extra code to your app.

Now I know that modern bundlers like VIT or Turbo Pack have tree-shaking built

if you're using a library that hasn't been written with tree-shaking in mind,

not using a modern bundler, then you could be adding a lot of code to your app.

Okay, so those are some reasons you might not want to use a library or package

Well, a full stack framework like Next.js or Remix can solve the issue of bloat

This means that a small amount or no.js is sent to the client, which is great.

But there are a few other reasons why you might not want to use a full stack

If you're building a client-side-only app, then there are a few benefits of a

like routing, code spitting, etc, but you may not need all of those features.

A full stack framework is great for server-side rendering and a static site

for a basic client-side app, it could be a bit much.

If you have a server-side app built with a framework and you want to do client-

fetching to give it a mobile app-like feel, then you still may need to use a

If you use Remix, then that pretty much has React through to build into it, so

go ahead and use that functionality to do client-side data fetching.

And if you use Next.js, well, for self-recommend using SWR since that's what

But for other full stack frameworks, you're going to have to use a library or

Now I'm not saying that you shouldn't use a library or framework for data fetch

In fact, I use Lexus all the time and I think it's great.

However, I want to highlight the fact that there are certain scenarios where

not want to or wouldn't be able to use a library or framework for data fetching

Okay, so let's recap some of those points.

The first point is about security vulnerabilities or updates.

If you have a library, you need to make sure you're always updating it so that

And if you want to do something that a library doesn't support, you have to

to the maintainer or you can try and add it yourself.

But that will take a long time for you to figure out how the library works to