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 3y agoReact - The Complete Guide
By: Udemy, Academind Pro (Maximilian Schwarzmüller)React: The Complete Guide by Maximilian Schwarzmüller — original 2022 edition covering React hooks, Redux, Context API, Next.js basics.47h 42m5/5 -
Updated 3y agoDoctor Appointment Booking App with React ,Firebase , ANT D
By: UdemyThe course covers many aspects of application development, including Firebase integration, user authentication, creating separate user interfaces.5h 45m -
Updated 2y agoReact Chrome Extension boilerplate | Shipped
By: 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 wh5/5
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.