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

 for data fetching, and it was even supported by the React team. However, the latest React documentation, a section titled "Good alternatives to data fetching in effects" highlights some downsides of fetching within effects such as:

There are a few more downsides which we'll go in a more detail later on in the course. But for now, let's talk about why this is more of an issue in React than it is in other libraries or frameworks.

---
title: What’s Wrong With useEffect?
description: Going through the problems with useEffect
privateVideoUrl: https://stream.mux.com/DofGh3oO00Q5X4mzwi02ZbAn013mu1M2H75GORDEbNsQMA.m3u8
role: "INTRODUCTION"
isPublicLesson: true
---

# What’s Wrong With useEffect?

## The Problem

It's common practice to use `useEffect` for data fetching, and it was even supported by the React team. However, the latest React documentation, a section titled "Good alternatives to data fetching in effects" highlights some downsides of fetching within effects such as:

1.  **Effects do not run on the server:** This means that all JavaScript for your component must be loaded before data fetching can begin.
2.  **Fetching in effects creates network waterfalls:** If nested components need to fetch data, they do so sequentially instead of concurrently. This causes the deepest nested component to wait for its parent to fetch data before it can start fetching.
3.  **No preloading or caching:** Data fetching cannot begin before the component is rendered. As a result, the data will be fetched every time the component is rendered, even if the data hasn't changed.

Richard Oliver Bray

Before we go ahead and start creating a performance data fetching solution for

talk about why I and many others including the React team don't recommend using

Funnily enough, there was a time when the React team recommended use effect for

If we go to the legacy React documentation in the browser, we can scroll down

the middle of the page and we can see down here that there's a what does use

to and we can see on the last sentence that it specifies data fetching.

So for a long time and even now, people use the use effect hook for fetching

But we can see that in the new React documentation, they still talk about data

use effect hook, however, it's something that they no longer recommend.

Let's take a look at the new React website in the browser.

In the use effect section of the documentation, there is a data fetching

If we click on this link, it will jump further down the page and we can see how

But if you scroll down, beyond this point, we'll see that there's a section in

which says what are good alternatives to data fetching in effects.

If you're curious and you click on the show details button, you can see here

documentation says although fetching inside effects is a popular way to fetch

approach is very manual and has significant downsides.

So here, the React team are not necessarily recommended it.

Then beyond this point, it goes on to list the downside of using use effect,

effect don't run on the server, that fetching in effects creates network water

you can't preload and cache data with an effect and so on.

So these are the main downsides that the React team specifies when using the

The first one is not being rendered on the server and this means that all the

for your component will need to be loaded before the data fetching can start if

Network waterfalls means that if you have nested components that need to fetch

will happen one after the other, meaning the deepest nested component will have

for the parent to start fetching data before it can start, which is really

if it doesn't depend on the parent's data in the first place.

Next is no preloading or caching, which again means you can't start fetching

the component is rendered and also if a user renders the same component

like a blog homepage for example, then the data will be fetched each and every

which is really not needed if the data hasn't changed.

Now there are way more downsides to using the use effect hook for data fetching

we'll talk about in more detail later on in the course.

But for now, let's highlight why this is more of an issue in React compared to

React has a very specific way of updating and re-rendering components.

Now the purpose of this video isn't to talk about the virtual DOM or how React

but I'm just going to explain a bit more about re-rendering to highlight why it

a bad idea to put data fetching in a use effect hook.

So let's explain how React re-renders by using an example of buying a hot dog

Let's imagine you were going to buy a hot dog from a food stand.

The hot dog arrives and it doesn't have any condiments, but you later realize

So you tell the seller and what they do is they throw the old hot dog away so

bin or in the trash and they give you a new one with ketchup on it.

But then you realize you want some mustard.

So you tell the seller and what they do, weirdly enough, is they grab the old

with the ketchup and throw it in the bin and give you a new one with ketchup

But then you realize you want ketchup mustard and onions.

So you tell the seller and what they do is they grab the old hot dog with k

mustard and throw it in the bin and give you a brand new one with ketchup,

Now you have to admit that's a really odd way of doing things.

Why not just add ketchup, mustard and onions to the hot dog you already have?

Each time a component updates, it throws away the old component and creates a