codedamn logocodedamn
Course image for React Query - The standard way to make network requests in React

React Query - The standard way to make network requests in React

Move beyond fetch and useEffect to make requests in React. Get caching advantages and more with react-query

2 hours+ of total content
4.8
91 ratings
776 students enrolled
Course Creator: Mehul Mohan

Hang on...

Heads up!

This is an official course from Full Stack Web Developer Learning Path learning path.

Goals

  • What is React Query and why we need it
  • Internals of react-query v3
  • Debugging queries and mutations using devtools
  • How caching works in react-query
  • Sharing data across multiple components without making multiple requests

Description

Get performant and powerful data synchronization for React using react-query. React query is a library built for react and Next.js codebases that comes baked in with all the best practices you should follow while making network requests:

  • Caching
  • Devtools
  • Automatic data invaldation
  • Stale while revalidate
  • And much more

No more hacking around with fetch and useEffect all day long. React query provides a standard way of performing API requests in your app. Moreover, with react-query, it is possible that you can get rid of your central state management like Redux or Context API because react query can cache and make your data available across multiple components automatically. It is a production-level ready library and the benefits are endless.

In this course, let’s take a deep dive into what react query is, how it works and why exactly you’ll need it. This course is interactive with tons of labs and projects to complete as you go and is available by default under codedamn Pro membership. If you are ready to upskill your React skills as a production-level developer, let’s start.

Course Structure

26 lectures 02:10:18 total duration

Introduction to React Query

(6 lectures • 21 minutes)
  Course Introduction (Watch video)
01:46
  Why React Query? (Watch video)
03:37
  Installing React Query (Watch video)
02:32
  Hello world with react-query (Watch video)
07:52
  Install react-query (Practice concept)
05:00
  Why is using fetch inside useEffect a bad idea for network requests? (Attempt quiz)
01:00
  React query states (Watch video)
06:27
  React query devtools explained (Watch video)
03:51
  Query keys (Watch video)
04:20
  Dependent queries (Watch video)
04:57
  Small GitHub app with react-query (Watch video)
09:12
  Creating a mini blog with React query (Watch video)
11:38
  Recreate the mini blog (Practice concept)
05:00
  getQueryData (Watch video)
06:36
  cacheTime (Watch video)
02:28
  Transform query result (Watch video)
02:40
  setQueryData (Watch video)
06:47
  staleTime (Watch video)
06:18
  Play with cacheTime and staleTime (Practice concept)
05:00
  Default query options (Watch video)
02:50
  Mutations (Watch video)
07:18
  Mutation side effects (hook) (Watch video)
04:03
  Mutation side effects (mutate fn) (Watch video)
04:42
  Building a To Do app with queries + mutations (Watch video)
10:02
  Building a To Do app - part 2 (Watch video)
03:22
  What's the difference between mutations and queries? (Attempt quiz)
01:00

Student feedback

4.8
Course Rating

93%

4%

0%

1%

1%

Reviews

Nov 30, 2021
Nice , just hoping some more free content :)
Nov 28, 2021
great work
Nov 24, 2021
awsome course
Nov 24, 2021
I like the course because it's capsule model. Each video discuss a single topic and explains it well.
Nov 22, 2021
this course is very informative

Your Course Instructor

Course Instructor Image

Mehul Mohan

Full-stack developer and security researcher

I'm a full-stack developer working with JavaScript and its associated runtimes for the past 7 years. I love to play with code and make something useful out of it! You can find me on social media, I'm quite active there :)

Upgrade to codedamn Pro Plan and unlock more courses for accelerated learning. Unlimited courses, interactive learning and more.

Free

  • HD video content
  • Certificate of completion
  • Mentorship from codedamn staff
  • Support over WhatsApp
  • Full learning path unlocked
  • Unlimited hands-on practice

Pro

  • HD video content
  • Certificate of completion
  • Mentorship from codedamn staff
  • All exclusive courses unlocked
  • Unlimited hands-on practice
Try codedamn Pro (14-day free refund)