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