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 will explore performance optimization techniques for React applications, specifically focusing on data caching and event listeners.

Event listeners play a crucial role in our data loading code. However, in complex applications, these listeners or other can consume significant system resources. To address this issue, we will use a hook introduced in React 18+ called 

, which provides an elegant solution for optimizing event listeners and data fetching, resulting in enhanced application performance.

 hook, we need to change how the getPokemons function is called in the 

 file to prevent the incorrect argument of signal being passed. This will ensure that the data is fetched correctly.

We can do this by updating the code in main.jsx to call the 

 function as a nested function like this:

// main.jsx

prefetchData("pokemons", getPokemons); // old
prefetchData("pokemons", () => getPokemons()); // new

 hook in React is a powerful tool that enables us to subscribe to an external non-React based store, such as custom event listeners. It automatically handles the subscription and un-subscription process when a component is mounted or unmounted. This hook also prevents unnecessary re-renders by maintaining a snapshot of the store data and only updating the component when the data in the snapshot changes.

---
title: The useSyncExternalStore Hook
description: Here we'll learn how to use the useSyncExternalStore hook
privateVideoUrl: https://stream.mux.com/ezukJOQZGkekcYnruTJxUnsG82YSD900FimKneyI1rPw.m3u8
code: https://gitlab.com/fullstackio/books/newline-course-apps/richard-bray-create-a-custom-usefecther-component-in-react-app/-/tree/main/04.01
---

# The useSyncExternalStore Hook

In this lesson, we will explore performance optimization techniques for React applications, specifically focusing on data caching and event listeners.

Event listeners play a crucial role in our data loading code. However, in complex applications, these listeners or other can consume significant system resources. To address this issue, we will use a hook introduced in React 18+ called [useSyncExternalStore](https://react.dev/reference/react/useSyncExternalStore), which provides an elegant solution for optimizing event listeners and data fetching, resulting in enhanced application performance.

:::note

Before we update our code to use the `useSyncExternalStore` hook, we need to change how the getPokemons function is called in the **api/pokemon.js** file to prevent the incorrect argument of signal being passed. This will ensure that the data is fetched correctly.

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

We can do this by updating the code in main.jsx to call the `getPokemons` function as a nested function like this:

```jsx
// main.jsx

prefetchData("pokemons", getPokemons); // old
prefetchData("pokemons", () => getPokemons()); // new
```

:::

## Optimizing Performance with `useSyncExternalStore`

The `useSyncExternalStore` hook in React is a powerful tool that enables us to subscribe to an external non-React based store, such as custom event listeners. It automatically handles the subscription and un-subscription process when a component is mounted or unmounted. This hook also prevents unnecessary re-renders by maintaining a snapshot of the store data and only updating the component when the data in the snapshot changes.

Richard Oliver Bray

We've added a lot of feature to our application, but there's one issue we've

We currently have our own custom event listener to update the state whenever

When it's listing for an event, it uses memory and processing resources from

But if it's not needed, so if we switch to a component that's not using our use

hook, then this will still be listening for changes and taking up resources.

This of course is not good for performance.

To fix this, we'd need to add a window.removeEventListener method to our use

And a common way to detect if a component is unmounted is to use the use effect

And that is to use the use sync external store hook.

This is a hook that exists in React version 18 and above.

And it allows us to subscribe to an external nonreact based store such as

listeners and it will automatically subscribe and unsubscribe when a component

It also prevents unnecessary re-renders by keeping a snapshot of the store data

update the component when the data in the snapshot changes.

As a free factor, our use data hook to make use of the use external sync hook.

We can test this using our first Pokemon app.

Before we go ahead and add the use sync external store hook, let's just fix one

If we right click anywhere on this page, click on Inspect and change the tab to

then refresh the page, you'll see the call that's been made contains something

This is because we're running the get Pokemon's function directly in the main.

has an argument of signal, but we actually have an argument of a mount that is

Let's take a look at the Pokemon.js file.

If we scroll down to line 16, you'll see here there's an argument called a

But since we've changed the first argument to be a signal inside the code that

fetch call, then that value is being passed in here instead of the default 150.

So we need to go into our main.jsx file and run get Pokemon's as a nested

On line 8, let's add parentheses before get Pokemon's add an equal and greater

and then at the end of get Pokemon's we're going to add parentheses.

This means that when the function runs, it's no longer going to pass in the

Okay, now you can see the Pokemon call is being made with a default value of

It's important to do this for future data fetching function calls.

Okay, now let's go into our data loader file.

The first thing we're going to do here is go to the first line in this file and

going to import our use sync external store hook the same way we import you

So after you state on line one, I'm going to add a comma and write use sync and

we've got it coming as the first drop down.

So I'm going to hit enter and that's important correctly.

Now in our use data function on line five, let's go all the way down to line

Then beneath it, I'm going to create a new variable called data and this is

equal our use sync external store hook and we're going to add parentheses.

The first is the function which we'll call subscribe and this function subscrib

So this rerenders the component whenever there's a change and returned a

to unsubscribe and it takes a second argument which you're going to call get

this is the function that reads data from the external store.

There's also an optional third argument called get server snapshot but we're

In our case, the subscribe function would be the add event listener listening

data fetched event and the key luck function would be the remove event listener

Let's go ahead and create a subscribe function and we'll put this beneath our

Next at the end of line 10, let's hit enter to make some space between the data

Then we're going to go down to the end of line 15, hit enter a few times and

The useSyncExternalStore Hook

Masterclasses

Tutorials

Fullstack React with TypeScript