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
Added to CourseFlix
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
- Language
- English
- Added to CourseFlix
- December 2024
- 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 |
Watch the other 19 lessons
One payment unlocks this course and every other premium course. No auto-renew.
See plansWhat courses are similar to React Data Fetching: Beyond the Basics?
Updated 3y agoReact Fundamentals
By: UI.dev (Tyler McGinnis)If you're serious about learning React, there's no better place to do it. Originally launched in 2016, this course has been taken by tens of thousands of develo4h 36m
Updated 5mo agoReactJS Ultra for Beginners
By: Pedro Henrique MachadoMaster ReactJS from scratch by learning components, states, routing, and forms through practical projects. This course will help you confidently apply React...14h 58m
FreeUpdated 3y agoReact and Typescript: Build a Portfolio Project
By: Udemy, Stephen GriderKick off your learning experience with an introduction on how to use React and Typescript together. Not familiar with Typescript? No problem!29h 21m5/5
Updated 2y agoReact Node FullStack - Ecommerce from Scratch to Deployment
By: UdemyLearn to Deploy your fully functioning Ecommerce app to production by using Digital Ocean cloud servers. Learn to add your own custom Domain name.16h 15m
Updated 1mo agoGo Full Stack with Spring Boot and React
By: UdemyJava and Spring developers build their first full-stack app: a React frontend wired to a Spring Boot and Spring Security REST API with JWT.11h 43m5/5
Updated 1mo agoRedux
By: UI.dev (Tyler McGinnis)Learn Redux from the inside out by building your own implementation first, then applying it to real React and vanilla JS applications.7h 13m
More courses by Fullstack.io
Updated 3y agoFullstack Node.js: The Complete Guide to Building Production Apps with Node.js
The Fullstack Node.js book is the complete guide to building fast, production-ready Node.js apps
Updated 1mo agoMastering CSS Layout
Build real CSS layout intuition across 26 lessons, learning to recreate any design with both CSS Grid and Flexbox.1h 27m2/5
Updated 1mo agoDemystifying Reactivity with Angular Signals
Learn Angular's signals API for state management through small, focused code examples, building from basics to computed values and effects.1h 44m
Updated 1mo agoNext.js Complex State Management Patterns with RSC
Untangle state management in Next.js Server Components across 19 lessons, covering client vs. server component patterns from the ground up.2h 56m5/5
Updated 3y agoFullstack ASP.NET Core and React Masterclass | Learnify
Learnify is a self-paced, online Masterclass, where you will master ASP.NET CORE and React by building a practical, real-world application from scratch.20h 40m0/5
Updated 3y agoTinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL
Learn to build a full app with React, TypeScript, Node, and GraphQL. You build features step by step and use clear patterns in a real project.30h 50m5/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.