Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

The Best Way to Fetch Data from an API in React - SWR Preload & Optimistic UI

Dave Gray via YouTube

Start learning Write review
Boot.dev Ad

The Most Addictive Python and SQL Courses

Learn More → Coursera Ad

Learn AI, Data Science & Business — Earn Certificates That Get You Hired

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
This tutorial demonstrates SWR 2.0 for fetching and preloading API data in React. It uses a CRUD to-do application to show stale-while-revalidate caching and optimistic UI updates, including rollback after failed requests.

Syllabus

Intro
Welcome
SWR Explained
Starter Code
Install SWR
json-server
Axios API layer
Imports
useSWR hook
SWR mutate function
What is a mutation?
Check the CRUD operations
Adding some delay
Viewing stale data until success or fail
SWR 2.0 Preload data
Benefits of Optimistic UI updates
Refactor to Optimistic UI
Helper functions
Import the helpers
Mutate with Optimistic UI
Checking the Optimistic UI
A Challenge for You

Taught by

Dave Gray

Reviews

Start your review of The Best Way to Fetch Data from an API in React - SWR Preload & Optimistic UI

Start learning

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.