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.
React Data Fetching: Beyond the Basics
2h 40m 15s
English
Paid
React Data Fetching: Beyond the Basics is a 20-lesson 2 hours 40 minutes self-paced course by Fullstack.io. This course will teach you how to effectively load data in React without using third-party libraries or the useEffect hook.
Course facts
- Lessons
- 20
- Duration
- 2 hours 40 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Fullstack.io
- Price
- Premium
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
Who teaches React Data Fetching: Beyond the Basics? Fullstack.io
Fullstack.io is the technical book and course publisher founded by Nate Murray, Ari Lerner, and team — known for the ng-book Angular series, the React Quickly books, and the fullstack React series that anchored a generation of working developers' first deep-dive into modern JavaScript framework material. Fullstack.io has since rebranded to Newline for its newer course catalog.
The book / course catalog covers the modern JavaScript framework landscape — Angular, React, Vue, GraphQL, Node.js — at the level of comprehensive reference works rather than introductory tutorials. The Fullstack.io style is unusually rigorous about the underlying APIs and edge cases that ship projects to production.
The CourseFlix listing under this source carries over 20 Fullstack.io / Newline courses spanning that range. Material is paid; the original platform sold both per-course access and membership tiers. Courses are aimed at developers ready to move past introductory tutorials into the depth of a chosen framework.
What lessons are included in React Data Fetching: Beyond the Basics?
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 subscriptionWhat courses are similar to React Data Fetching: Beyond the Basics?
-
Updated 2y agoTesting React Apps with React Testing Library
By: Mosh Hamedani (Code with Mosh)Tired of piecing together disconnected tutorials or dealing with rambling, confusing instructors? This course is for you!6h 48m5/5 -
Updated 2y agoAdvanced Animating React with Framer Motion
By: Level Up Tutorials (Scott Tolinski)Welcome to Advanced Animating React with Framer Motion! In this series, we will dive into more advanced concepts as well as discuss what is new in Framer Motion2h 57m5/5 -
Updated 3y agoReact: Flux Architecture (ES6)
By: egghead.ioAs a React application grows, so does the needs for organization and patterns. How do components communicate? How do we manage state across the application? How49m
Frequently asked questions
What are the prerequisites for this course?
Prospective students should have a basic understanding of React, including components, state, and props. Familiarity with JavaScript, especially asynchronous operations using promises or async/await, will be beneficial. The course is designed for those who want to deepen their knowledge of data fetching in React without relying on third-party libraries.
What will I build during this course?
Students will create a custom data loading library from scratch. This library will handle various data fetching challenges such as preloading, caching, error handling, and refetching. The course emphasizes practical solutions like fixing race conditions and network waterfalls, providing hands-on experience in enhancing data fetching efficiency.
Who is the target audience for this course?
The course is aimed at React developers who want to improve their data fetching strategies. It is particularly suitable for those who wish to move beyond the useEffect hook and third-party libraries, focusing instead on building a more robust, customized solution.
What specific tools or platforms will I learn about?
Students will explore the useSyncExternalStore hook as part of their custom data fetching solution. The course also covers strategies for prefetching data based on page routes and implementing a 'Stale While Revalidate' approach to manage data freshness effectively.
What topics are not covered in this course?
The course does not cover data fetching using third-party libraries such as Axios or React Query. It focuses solely on creating a custom data fetching solution within React without external dependencies. Additionally, topics related to server-side rendering or other frontend frameworks are not included.
How much time should I expect to commit to this course?
While the total runtime of the course is not specified, it comprises 20 lessons. Students should allocate sufficient time to engage with each lesson and the accompanying exercises to fully grasp the concepts and techniques presented. The time commitment will vary based on individual learning pace.
How will the skills learned in this course carry over to other projects or careers?
The skills acquired in this course will enhance your ability to handle data fetching in React efficiently and effectively. Understanding how to build a custom data loading library can be beneficial in developing scalable, maintainable applications. These skills are valuable for any React developer looking to optimize data handling in their projects or improve their job prospects in the field of frontend development.