React Data Fetching: Beyond the Basics
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.
- 5.0 / 5 (1 ratings)
- Published
- Updated
2 hrs 40 mins
20 Videos
Richard Oliver Bray
Full stack web developer with over 10 years of experience. Working with React for 5 years. I have a passion for teaching others how to code.
01Remote
You can take the course from anywhere in the world, as long as you have a computer and an internet connection.
02Self-Paced
Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.
03Community
Join a vibrant community of other students who are also learning with React Data Fetching: Beyond the Basics. Ask questions, get feedback and collaborate with others to take your skills to the next level.
04Structured
Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.
Implement prefetching, caching and stale-while-revalidate with the useSyncExternalStore hook
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.
Course Content Overview
Course Overview: Total Modules: 5 Total Lessons: 20 Total Video Runtime: 2 hours, 40 minutes
Our students work at
Sample Course Lessons
Course Syllabus and Content
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.
Intro & Getting Started
4 Lessons 19 Minutes
Understand the problems with using the useEffect hook for data fetching, the pros and cons of using libraries and frameworks for data fetching.
- Sneak Peek00:02:56
- Sneak Peek00:05:52
- Sneak Peek00:05:45
- Sneak Peek00:04:30
Prefetching & Caching
5 Lessons 39 Minutes
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.
- Sneak Peek00:12:22
- Sneak Peek00:05:38
- Sneak Peek00:06:42
- Sneak Peek00:13:09
- Sneak Peek00:01:41
Race Conditions & Network Waterfalls
4 Lessons 51 Minutes
Learn how to identify and fix two big issues with data fetching in React, Race Conditions and Network Waterfalls.
- Sneak Peek00:09:32
- Sneak Peek00:20:10
- Sneak Peek00:19:05
- Sneak Peek00:02:24
Refactoring and SWR
5 Lessons 42 Minutes
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.
- Sneak Peek00:09:44
- Sneak Peek00:07:26
- Sneak Peek00:09:11
- Sneak Peek00:12:46
- Sneak Peek00:03:10
Wrapping Up
2 Lessons 7 Minutes
Learn about how our data fetching library can be used in a server-side environment particularly with React Server Components.
- Sneak Peek00:06:06
- Sneak Peek00:01:46
Subscribe for a Free Lesson
By subscribing to the newline newsletter, you will also receive weekly, hands-on tutorials and updates on upcoming courses in your inbox.
What Students are Saying
Meet the Course Instructor
Purchase the course today
newline Pro Subscription
$18/MO
Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More
Billed annually or $40/mo billed monthly. Free to cancel anytime.
- Discord Community Access
- Full Transcripts
- Money Back Guarantee
- Lifetime Access
Plus:
- Unlimited access to 60+ newline Books, Guides and Courses
- Interactive, Live Project Demos for Every newline Book, Guide and Course
- Complete Project Source Code for Every newline Book, Guide and Course
- Best Value 🏆
Frequently Asked Questions
What is React Data Fetching: Beyond the Basics?
It's a course that will show you how to fetch data efficiently in React without a third party library or the use effect hook.
Who is this course for?
This course was produced for mid to senior developers. Library authors, and those want to fetch data in a performant way.
Why do you need to improve performance?
Fetching data is such a crucial part of building React applications, and not doing it correctly could lead to slower applications for many reasons like:
- Refetching data that hasn't changed which should be cached
- Fetching data again that is currently being fetched
- Not fetching data before a component is rendered
- Fetching data on hover or focus
And many other reasons.
Why do I need to create something custom?
If you have an existing project that is using a data fetching library, you may not need to create something custom. However, if you are building a new project or want to improve the performance of an existing project, and want to have more control over how data is fetched, then creating something custom is the way to go.
Or if you simply want a better understanding of data fetching issues and how to solve them, then creating something custom is a great way to learn.
What are the problems that inspired this course?
React is a great library for building user interfaces and it gives a great set of utilities. But when it comes to doing something specific, the recommendation is usually to reach for a library. However, for those who want to dig deeper and understand how things work a library isn't really helpful.
This course was inspired by the need for developers to understand how data fetching in React works, the common issues that arise, and the best ways to solve them.
Will the code produced work with React 19 and the React Compiler?
At the time of creating this course React 19 was not released.However the code works with React 18.3.1 and passed all the React Compiler health checks.
What if I don't like the course?
We offer a 30-day money-back guarantee, so if you're not satisfied with the course, you can request a refund within 30 days of purchase by sending us a message.
What is included in the course?
This course include 20 videos, totaling 2 hours and 40 minutes. You’ll have access to every lesson video, textual lesson content, downloadable project code files, interactive IDE, and AI Tutor.
What are there prerequisites for this course?
This course assumes you know the basics of React, JavaScript and Front-end web development.
How long will it take to complete the course?
The course offers flexibility, allowing you to learn at your own pace. Start, stop, re-watch anytime. It’s expected that you’d spend approximately 4 hours going through the entire course materials.
Can I access the course on my mobile device?.
Yes, the course is fully responsive and can be accessed on your mobile device.
Is there a certificate upon completion of the course?
Yes, you can get a certificate by sending us a message.
Can I ask questions during the course?
Yes, you can ask questions in the comments section of each lesson, and our team will respond as quickly as possible. You can also ask us questions anytime through the community driven Discord channel.
Can I download the course videos?
No, the course videos cannot be downloaded, but they can be accessed online at any time.
What is the price of the course?
The course is currently priced at [$X USD]. Alternatively, you can access the complete course as part of the "newline Pro subscription", which costs $20/month.
How is this course different then other content available on data fetching?
This course is unlike any other course on data fetching because doesn't show you how to use an existing library but create your own from scratch. This helps with addressing your specific application needs and can also be adapted to other JavaScript frameworks.