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
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.
What You Will Learn
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
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.
But then goes on to specify all the problems with using it 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 and network waterfalls.
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, this course will help you do all those things and much more.
Homepage:

https://www.newline.co/courses/react-data-fetching-beyond-the-basics