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
On demand video

2 hrs 40 mins

Video Lessons

20 Videos

Course Instructor
Avatar Image

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.

How The Course Works

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.

Course Overview

Implement prefetching, caching and stale-while-revalidate with the useSyncExternalStore hook

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.

Course Content Overview

Course Overview: Total Modules: 5 Total Lessons: 20 Total Video Runtime: 2 hours, 40 minutes

Our students work at

  • salesforce-seeklogo.com.svgintuit-seeklogo.com.svgAdobe.svgDisney.svgheroku-seeklogo.com.svgAT_and_T.svgvmware-seeklogo.com.svgmicrosoft-seeklogo.com.svgamazon-seeklogo.com.svg

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.

Module 1

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.

Module 2

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.

Module 3

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.

Module 4

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.

Module 5

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.

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

        Richard Oliver Bray

        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.

        Purchase the course today

        One-Time Purchase

        React Data Fetching: Beyond the Basics

        $79
        React Data Fetching: Beyond the Basics
        • Discord Community Access
        • Full Transcripts
        • Money Back Guarantee
        • Lifetime Access

        newline Pro Subscription

        $18/MO

        Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More

        React Data Fetching: Beyond the Basics

        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.

        Newline Image

        React Data Fetching: Beyond the Basics

        $79