Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

This Could Be the BEST way to fetch data from an API in React! - SWR 2.0 Preload & Optimistic UI have never been easier to implement. Let's check out SWR 2.0 React hooks for data fetching.

Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React: https://bit.ly/AdvReactDev
- The Complete Web Developer: https://bit.ly/WebDevMaster
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

Subscribe https://bit.ly/3nGHmNn

Course Updates https://courses.davegray.codes/

Questions - Please post them to my Discord https://discord.gg/neKghyefqh

Buy Me A Coffee https://www.buymeacoffee.com/davegray

Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/

Source Code: https://github.com/gitdagray/react-swr
** Note: After video completion, I added a refactor to take advantage of the SWR populateCache function. I suggest completing the video and then viewing my refactor - code comments included.

SWR 2.0 with Preload & Optimistic UI

(00:00) Intro
(00:18) Welcome
(00:40) SWR Explained
(01:51) Starter Code
(02:44) Install SWR
(03:09) json-server
(03:51) Axios API layer
(05:57) Imports
(07:11) useSWR hook
(09:13) SWR mutate function
(12:17) What is a mutation?
(12:39) Check the CRUD operations
(13:38) Adding some delay
(15:27) Viewing stale data until success or fail
(16:27) SWR 2.0 Preload data
(19:10) Benefits of Optimistic UI updates
(20:04) Refactor to Optimistic UI
(21:01) Helper functions
(25:36) Import the helpers
(26:28) Mutate with Optimistic UI
(27:15) Checking the Optimistic UI
(28:04) A Challenge for You

Tutorial References:
SWR Official Website: https://swr.vercel.app/
React Official Website: https://reactjs.org/
Vite Official Website: https://vitejs.dev/
JSON Server: https://www.npmjs.com/package/json-server
React Hot Toast: https://www.npmjs.com/package/react-hot-toast

Was this SWR with Preload and Optimistic UI tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#swr #react #fetch