CF

React Query: Server State Management in React

7h 39m 49s
English
Paid

React Query: Server State Management in React is a 83-lesson 7 hours 39 minutes self-paced course by Udemy. React Query has become the go-to solution for server state management in React apps, and for good reason!

Course facts

Lessons
83
Duration
7 hours 39 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Premium

React Query has become the go-to solution for server state management in React apps, and for good reason! This smart, comprehensive solution makes it easy to keep your app up-to-date with data on the server. In fact, if you are using Redux simply to manage data from the server, React Query can replace Redux in your app. Moreover, for server data management, React Query is much simpler and more powerful than Redux.

Benefits of Using React Query

For example, React Query:

  • Tracks loading and error states for your server queries (no need to manage that yourself!)
  • Makes cached server data available for display while you're fetching updated data

Course Overview

This course starts with a simple app to learn the basics of React Query:

  • Queries
  • Loading and error states
  • React Query dev tools
  • Pagination and pre-fetching
  • Mutations

Exploration with the Star Wars API

We take a detour with the Star Wars API to learn about Infinite Queries - getting more data just as the user nears the end of the current data.

Advanced Features in a Multi-Component App

Finally, we work on a large, multi-component app to delve deeper into these concepts, plus:

  • Centralizing loading and error handling
  • Filtering data
  • Integrating React Query with authentication
  • Keeping data up-to-date after mutations, including optimistic updates
  • Testing React Query

Additional Course Features

  • Pre-written projects for React Query practice, minimizing time spent on irrelevant code
  • Ample opportunities to practice through periodic "code quizzes" to solidify your understanding
  • Visual models for complex concepts to aid comprehension of all the moving pieces
  • The major project is written in TypeScript
  • A supportive instructor who engages with students in Q&A

Come see what the hype is about, and improve your apps with simpler, more effective server state management!

Who teaches React Query: Server State Management in React? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in React Query: Server State Management in React?

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Introduction to React Query
All Course Lessons (83)
#Lesson TitleDurationAccess
1
Introduction to React Query Demo
06:01
2
Introduction to this Course
03:03
3
First project: Blog-em Ipsum
05:39
4
Creating Queries with useQuery
07:47
5
Handling Loading and Error States
07:03
6
React Query Dev Tools
04:57
7
staleTime vs cacheTime
06:33
8
Intro to Code Quizzes
02:34
9
Code Quiz! Create Query for Blog Comments
07:03
10
Query Keys
06:23
11
Pagination
06:06
12
Pre-fetching Data
06:50
13
isLoading vs isFetching
04:55
14
Intro to Mutations
03:51
15
Delete Post with useMutation
06:49
16
Code Quiz! Mutation to Update Post Title
04:02
17
Summary: React Query Basics
03:01
18
Introduction to Infinite Scroll
04:32
19
Code Quiz! Set up Infinite SWAPI for React Query
05:27
20
Intro to useInfiniteQuery
06:20
21
Infinite Scroll Diagram
04:32
22
Write useInfiniteQuery Call
05:10
23
InfiniteScroll Component
06:18
24
useInfiniteQuery Fetching and Error states
04:08
25
Code Quiz! Infinite Species
07:09
26
Summary: Infinite Scroll
02:54
27
Intro to Lazy Days Spa App
06:22
28
Lazy Days Spa App Code Orientation
05:43
29
Install and set up React Query
07:01
30
Custom Query Hook: useTreatments
06:17
31
Fallback Data
02:13
32
Centralized Fetching indicator with useIsFetching
04:25
33
onError Handler for useQuery
06:45
34
onError Default for Query Client
06:40
35
Code Quiz! Custom Hook for useStaff
04:50
36
Summary: Larger App Setup, Centralization, Custom Hooks
03:00
37
Adding Data to the Cache
04:16
38
Pre-Fetching Treatments (concepts)
05:11
39
Pre-Fetching Treatments (syntax)
05:23
40
Intro to useAppointments Custom Hook
10:47
41
useQuery for useAppointments
03:53
42
Query Keys as Dependency Arrays
06:22
43
Code Quiz! Pre-Fetch Appointments
07:25
44
Summary: Query Features I
03:26
45
Filtering Data with the useQuery select Option
08:16
46
Code Quiz! Selector for useStaff
05:58
47
Intro to Re-Fetch
06:00
48
Update Re-Fetch Options
05:15
49
Global Re-Fetch Options
05:36
50
Overriding Re-Fetch Defaults and Polling
04:53
51
Polling: Auto Re-Fetching at an Interval
04:11
52
Summary: Query Features II
01:13
53
Intro to React Query and Authentication
08:31
54
Intro to useAuth and useUser
04:47
55
Dependent Query in useUser
07:13
56
Code Quiz! Dependent Query in useUserAppointments
09:13
57
Adding User Data to Query Cache
06:12
58
Removing User Appointments Data on Signout
04:55
59
Summary: React Query and Authentication
02:57
60
Introduction to Mutations and Mutations Global Settings
00:00
61
Custom Mutation Hook: useReserveAppointments
06:18
62
OPTIONAL: TypeScript for `mutate` Function
04:04
63
Invalidating Query after Mutation
05:29
64
Query Key Prefixes
05:44
65
Code Quiz! Mutation to Cancel an Appointment
07:03
66
Update User and Query Cache with Mutation Response
09:34
67
Intro to Optimistic Updates in React Query
06:42
68
Making a Query "Cancel-able"
07:28
69
Writing Optimistic Update
12:27
70
Summary: Mutations
01:25
71
Intro to Testing React Query
02:09
72
Testing Setup, including Mock Service Worker
04:33
73
Query Client and Provider in Tests
09:05
74
Testing Rendered Query Data
03:21
75
Code Quiz! Test Rendered Staff Data
03:43
76
Testing Query Errors
11:14
77
Code Quiz! Staff Query Errors
04:21
78
Testing Mutations
08:28
79
Code Quiz! Test Cancel Appointment Mutation
04:24
80
Intro to Testing Custom Hooks
03:36
81
Test Appointments Filter
08:08
82
Code Quiz! Test Staff Filter
03:24
83
Summary: Testing React Query
02:53
Unlock unlimited learning

Get instant access to all 82 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to React Query: Server State Management in React?

More courses by Udemy

Frequently asked questions

What prerequisites should I have before taking this course?
Before enrolling in this course, you should have a foundational understanding of React. Familiarity with JavaScript and asynchronous programming concepts will also be beneficial. While the course will cover React Query from the basics, prior experience with state management tools like Redux might help you understand the comparisons made throughout the lessons.
What types of projects will I work on during this course?
Students will work on a variety of projects, starting with a simple app to learn the basics of React Query. The course includes projects like 'Blog-em Ipsum' for creating queries and handling states, and a detour with the Star Wars API to explore infinite queries. A larger, multi-component app is also part of the curriculum to delve deeper into advanced features such as authentication and data filtering.
Who is the target audience for this course?
This course is designed for React developers looking to manage server state more efficiently. It is particularly useful for those who have been using Redux solely for server state management and are interested in exploring a simpler and more powerful alternative with React Query. Developers aiming to improve their understanding of server data management in React applications will find this course beneficial.
How does the depth of this course compare to others on server state management?
This course provides an in-depth look at server state management using React Query, covering both basic and advanced features. Unlike other courses that may focus on Redux or other state management tools, this course emphasizes the unique advantages of React Query, such as centralized loading and error handling, and integrating with authentication systems. It goes beyond basic usage to include testing and advanced query features.
What specific tooling is covered in this course?
Students will learn to use React Query, focusing on elements like the React Query Dev Tools for debugging and performance insights. The course covers specific techniques such as creating queries with useQuery, handling loading and error states, implementing mutations with useMutation, and managing infinite data fetching with useInfiniteQuery. Additionally, it explores caching strategies and query pre-fetching.
What topics are not covered in this course?
This course does not cover general state management solutions outside of React Query, such as Redux or MobX, except to compare their use cases for server state management. It also does not delve into client-side state management or broader application architecture topics not directly related to server state management with React Query.
How much time should I expect to commit to this course?
The course consists of 83 lessons, each designed to provide a thorough understanding of React Query's capabilities. While the exact runtime is not specified, students should be prepared to spend time on each lesson, including practice projects and code quizzes, to fully grasp the material. The time commitment will vary based on individual pace and prior experience with React and server state management.