CF

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

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.

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 thumbnail

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?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 20 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Course Introduction
All Course Lessons (20)
#Lesson TitleDurationAccess
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 subscription

What courses are similar to React Data Fetching: Beyond the Basics?

More courses by Fullstack.io

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.