Use Axios with React Hooks for Async-Await Requests
Dave Gray
@davegrayteachescodeAbout
Web Development tutorials with full courses on HTML, CSS, JavaScript, React, Node.js and more! My goal is to help you learn how to build the web. Teaching helps me learn, too. I work full-time as a Solutions Architect / Developer and part-time as a university web dev instructor. Thank you for subscribing, supporting my channel and sharing the videos you think may help others. Keep striving for progress over perfection. And a little progress every day goes a very long way. Milestones: July 20, 2020 - 1st video Jan 1, 2021 - 1k subs April 2021 - 4k watch hours Nov 2021 - 10k subs Jan 21, 2022 - Video at 100k views Feb 16, 2022 - 100k watch hours Feb 19, 2022 - 1m views Dec 13, 2022 - 100k subs Dec 2022 - Over 1m views in 1 month April 7, 2023 - 10m views May 26, 2023 - 1m watch hours Sept 22, 2023 - Video at 1m views Dec 25, 2023 - 250k subs
Video Description
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap Learn how to use Axios with React hooks for async / await requests. In this tutorial, we will create two custom React hooks with Axios. These Axios hooks will return both data and functions to help complete all CRUD operations. đ Support me on Patreon â https://patreon.com/davegray â Become a full-stack web dev with Zero To Mastery Courses: - Advanced React: https://bit.ly/AdvReactDev - Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr - Master FAANG Coding Interviews: https://bit.ly/FAANGInterview đ© Subscribe â https://bit.ly/3nGHmNn đ React JS for Beginners full course - 9 hours: https://youtu.be/RVFAyFWO4go đŹ Course Updates â https://courses.davegray.codes/ đ Source Code: https://github.com/gitdagray/react_hooks_axios Use Axios with React Hooks for Async-Await Requests (00:00) Intro (00:41) Welcome (00:54) Install Axios (01:38) useAxios hook (03:14) Request Config (04:02) useAxios continued (05:23) AbortController - not isMounted (06:19) useAxios completed (09:33) Create an Axios instance (11:00) Joke component (16:25) Testing useAxios (16:52) Add refetch to useAxios (19:49) Testing refetch (20:13) useAxios vs useAxiosFunction (20:54) useAxiosFunction (25:08) Create a 2nd Axios instance (25:43) Posts component (33:45) Quick debug (34:41) Testing useAxiosFunction â Buy Me A Coffee: https://www.buymeacoffee.com/davegray đ Tutorial References: Stop Checking If Your React Component is Mounted: https://medium.com/doctolib/react-stop-checking-if-your-component-is-mounted-3bb2568a4934 Axios Request Config Docs: https://axios-http.com/docs/req_config đ ES7 React JS Snippets Extension for VS Code: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets đ React Dev Tools Extension for Chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi đ General React References: ReactJS Official site: https://reactjs.org/ React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library) React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location= â Follow Me: Github: https://github.com/gitdagray Twitter: https://twitter.com/yesdavidgray LinkedIn: https://www.linkedin.com/in/davidagray/ Blog: https://yesdavidgray.com Reddit: https://www.reddit.com/user/DaveOnEleven Was this tutorial about creating custom React hooks with Axios helpful? If so, please share. Let me know your thoughts in the comments. #axios #react #hooks
Boost Web Dev Skills Today
AI-recommended products based on this video
Magnetic Nasal Strips Starter Kit: Comfortable Nasal Breathing Support for Sleep, Helps Reduce Snoring Noise, Includes 60 Tabs (30 Uses) with 4 Sizes
Environet Hydroponic Growing Kit, Self-Watering Mason Jar Herb Garden Starter Kit Indoor, Windowsill Herb Garden, Grow Your Own Herbs from Organic Seeds (Basil)
Herb Garden Planter Indoor Kit 21Pcs Kitchen Herb Garden Starter Kit Growing Kit Including Wooden Box Burlap Pots Soil Discs Gardening Tools Unique Easter Birthday Christmas Gift Ideas for Women Mom
