React Data Fetching: Beyond the Basics

2h 40m 15s
English
Paid

Course description

This course will teach you how to effectively load data in React without using third-party libraries or the useEffect hook. We will create our own data loading library from scratch that will handle preloading, caching, and address all common data-related challenges.

Read more about the course

What you will learn:

  • How React re-renders when loading data
  • Issues with using the useEffect hook for data loading
  • Advantages and disadvantages of using libraries and frameworks for data loading
  • How to start loading data before your React component is loaded
  • How to create a data cache to prevent reloading
  • How to identify and resolve issues with Network Waterfalls and Race Conditions
  • When and why to use the useSyncExternalStore hook
  • How to implement the stale-while-revalidate caching method
  • How to perform data loading for React Server Components

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 20 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Course Introduction

All Course Lessons (20)

#Lesson TitleDurationAccess
1
Course Introduction Demo
02:57
2
What’s Wrong With useEffect
05:53
3
Using Libraries or Frameworks for Data Fetching
05:46
4
Optimizing Your Dev Environment for this Course
04:31
5
Fetch Data Before you Component Loads
12:23
6
Creating an Efficient Data Cache
05:39
7
Fetching Data on an Event
06:43
8
Loading and Error Handling
13:10
9
Module 2 Recap
01:42
10
Simple Refetching
09:33
11
Fixing Race Conditions
20:11
12
Fixing Network Waterfalls
19:06
13
Module 3 Recap
02:25
14
The useSyncExternalStore Hook
09:45
15
Prefetching Based on Page Route
07:27
16
Saving Data Sources
09:12
17
Stale While Revalidate
12:47
18
Module 4 Recap
03:11
19
Fetching on the Server
06:07
20
Final Words
01:47

Unlock unlimited learning

Get instant access to all 19 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo

Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo

Sources: Nomad Coders
We will do a Uber clone (backend + frontend + deployment). From head to toe using JavaScript! This time full stack, full JavaScript stack!
22 hours 41 minutes 56 seconds
React Hooks

React Hooks

Sources: ui.dev (ex. Tyler McGinnis)
If you never develop a convincing answer for both of those questions, you won’t have a solid enough foundation to build upon when you dive into the specifics. These questions ar...
3 hours 47 minutes 48 seconds
Microservices with Node JS and React

Microservices with Node JS and React

Sources: udemy, Stephen Grider
Event-Based Architecture? Covered! Server side rendering with React? Yep. Scalable, production-ready code? Its here! Microservices are the number one solution for building and s...
54 hours 13 minutes 19 seconds
Build a Slack Chat App with React, Redux, and Firebase

Build a Slack Chat App with React, Redux, and Firebase

Sources: udemy
Throughout this course, we'll be building a live chat app for developers called DevChat, where users will be able to create channels, to send messages to other users on those ch...
5 hours 55 minutes 18 seconds
Zero to Full Stack Hero

Zero to Full Stack Hero

Sources: papareact.com
PAPA React presents.. Zero to Full Stack Hero. It's NOT just another COURSE. It's the world's BEST COMMUNITY. From learning the Basics of Web Development to Mastering React!
101 hours 29 minutes 59 seconds