Главная
Study mode:
on
1
Intro
2
Welcome
3
SWR Explained
4
Starter Code
5
Install SWR
6
json-server
7
Axios API layer
8
Imports
9
useSWR hook
10
SWR mutate function
11
What is a mutation?
12
Check the CRUD operations
13
Adding some delay
14
Viewing stale data until success or fail
15
SWR 2.0 Preload data
16
Benefits of Optimistic UI updates
17
Refactor to Optimistic UI
18
Helper functions
19
Import the helpers
20
Mutate with Optimistic UI
21
Checking the Optimistic UI
22
A Challenge for You
Description:
Explore an advanced approach to fetching data from APIs in React using SWR 2.0 Preload and Optimistic UI in this comprehensive 30-minute tutorial. Learn how to implement SWR React hooks for efficient data fetching, starting with an explanation of SWR and progressing through installation, setup with json-server, and creating an Axios API layer. Master the useSWR hook, understand mutations, and discover how to handle CRUD operations with added delay for realistic scenarios. Dive into SWR 2.0's preload functionality and the benefits of Optimistic UI updates. Follow along as the tutorial guides you through refactoring for Optimistic UI, creating helper functions, and implementing mutate with Optimistic UI. Conclude with a practical challenge to reinforce your newly acquired skills in this cutting-edge React data fetching technique.

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

Dave Gray
Add to list