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?
UpdatedGo 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
UpdatedReact Testing Library and Jest: The Complete Guide
By: Udemy, Stephen GriderLearn to test React apps properly with React Testing Library and Jest, covering auth, data fetching, mocking, and real-world testing patterns.7h 40m
Updated 6mo agoMastering React.js Interviews: For Middle/Senior Developers
By: Kristiyan VelkovThe book for Middle/Senior developers will help successfully pass interviews on React.js, explore application architecture, security, and performance.
Updated 2y agoReact, Angular, Node In-Depth Guide: Beginner to Pro
By: UdemyIf you are planning to start your career as a developer or you just want to improve your programming skills, then this course is right for you. Get all you need80h 1m
Updated 3y agoStripe Payments JavaScript Course
By: FireshipLearn how to build safe Stripe payments with JavaScript. You use Node and React to create a web app that handles charges, customers, and subscriptions.1h 29m
Updated 2y agoReact - The Complete Guide 2024
By: Udemy, Academind Pro (Maximilian Schwarzmüller)React: The Complete Guide 2024 by Maximilian Schwarzmüller — updated curriculum with React 18, Server Components, Suspense, and modern hooks.64h 33m5/5
UpdatedNext.JS with Sanity CMS - Serverless Blog App (w/ Vercel)
By: UdemyBuild a serverless blog with Next.js and Sanity CMS across 81 lessons: content modeling, filtering, dark mode, and Vercel deployment.13h 5m
More courses by Fullstack.io
Updated 2y 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
UpdatedMastering CSS Layout
Build real CSS layout intuition across 26 lessons, learning to recreate any design with both CSS Grid and Flexbox.1h 27m2/5
UpdatedDemystifying 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
UpdatedNext.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 2y 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.