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

Watch Online React Data Fetching: Beyond the Basics

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

Full-Stack Fundamentals 1 - Frontend

Full-Stack Fundamentals 1 - Frontend

Sources: Mckay Wrigley (takeoff)
As part of this project, you will create your personal portfolio website from scratch. This will be an excellent way to showcase your work as you...
1 hour 8 minutes 57 seconds
Next.js - The Full Course

Next.js - The Full Course

Sources: fireship.io
Next.js - The Full Course provides a in-depth look into the Next.js App Router introduced in version 13.2. It puts React Server Components into practice by buil
1 hour 14 minutes 14 seconds
MERN Invoice Web App with Docker,NGINX and ReduxToolkit

MERN Invoice Web App with Docker,NGINX and ReduxToolkit

Sources: udemy
Hi, welcome to this course on building a functional fullstack MERN app, that can be used for generating invoices, quotations and receipts. We shall build this
24 hours 38 minutes 4 seconds
React JS 19 Crash Course | Build an App and Master React in 2 Hours

React JS 19 Crash Course | Build an App and Master React in 2 Hours

Sources: jsmastery.pro, Adrian Hajdin
This course offers a practical approach: clear explanations, real tasks, and necessary tools, so you can not only understand but also immediately apply the new.
2 hours 7 minutes 16 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 ...
54 hours 13 minutes 19 seconds