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
0:00
/ #1: Course Introduction
All Course Lessons (20)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
My first Remix app
Sources: Build UI
Remix is a modern full-stack React framework built on the foundations of the web platform. It layers the latest innovations in the frontend ecosystem on top of the core URL-base...
5 hours 44 seconds
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
Chrome Extension Mastery: Build Full-Stack Extensions with React & Node.js
Sources: Ryan Fitzgerald
Master the creation of full-fledged Chrome extensions from scratch to production! Learn how to develop powerful, functional Chrome extensions using a modern...
10 hours 3 minutes 45 seconds
React Chrome Extension boilerplate | Shipped
Sources: Luca Restagno (shipped.club)
Launch your Chrome Extension in hours, not weeks. The boilerplate for busy makers, to launch your React Chrome Extensions fast. ou don't need to reinvent the wheel and code ever...
Build fancy landing pages with React and Threejs
Sources: Paul Henschel (@0xca0a)
This course teaches you how to add stunning flourishes to your sites with little code and complexity. You would think that some of the extraordinary websites on awwwards, fwa or...
38 minutes 9 seconds