This Could Be the BEST Way to fetch data from an API in React! | SWR Preload & Optimistic UI
60.9 هزار بار بازدید -
2 سال پیش
-
Web Dev Roadmap for Beginners
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 ➜ Discord: discord
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: Twitter: yesdavidgray
LinkedIn: LinkedIn: 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-se...
🔗 React Hot Toast: https://www.npmjs.com/package/react-h...
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
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 ➜ Discord: discord
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: Twitter: yesdavidgray
LinkedIn: LinkedIn: 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-se...
🔗 React Hot Toast: https://www.npmjs.com/package/react-h...
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
2 سال پیش
در تاریخ 1401/10/27 منتشر شده
است.
60,997
بـار بازدید شده