State Management in React | Context API useContext | React Tutorials for Beginners
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 State Management in React with this Context API tutorial and the useContext hook. React JS allows us to drill props through components, but we can avoid this with the Context API and the useContext hook. 🚩 Subscribe ➜ https://bit.ly/3nGHmNn 🚀 This lesson is part of a Learn React tutorial series playlist: https://youtube.com/playlist?list=PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp 🔗 Project Source Code: https://github.com/gitdagray/react_context State Management in React | Context API Tutorial | useContext hook (00:00) Intro (00:05) Welcome (00:13) Quick Overview (01:05) Creating Context (03:54) Adding the DataProvider (05:03) Moving State and Logic to Context (07:21) Refactoring Header with useContext (10:21) Refactoring Nav with useContext (11:53) Refactoring Home with useContext (14:42) Refactoring NewPost with useContext (17:21) Refactoring EditPost with useContext (19:30) Refactoring PostPage with useContext (22:00) App component clean up (23:04) Does it all need to be in context? (24:37) Component state vs shared state with context (26:17) Refactoring component states while keeping shared state in context 🔗 Rules of Hooks: https://reactjs.org/docs/hooks-rules.html 🔗 Collections of Hooks: https://nikgraf.github.io/react-hooks/ https://www.npmjs.com/package/react-use 🔗 Axios: https://www.npmjs.com/package/axios 🔗 React Router: https://reactrouter.com 🔗 JSON-Server: https://www.npmjs.com/package/json-server 🔗 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 🔗 Styled Components: https://styled-components.com/ 📚 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: 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 the React Context API and useContext hook helpful? If so, please share. Let me know your thoughts in the comments. #react #context #useContext
Build Your Own Stool Kit
AI-recommended products based on this video

Paint Your Own Moon Lamp Kit, DIY 3D Moon Night Light with Space Figurines & Wooden Stand, Art Supplies Creativity Arts & Crafts Kit for Kids, Toys Girls Boy Birthday Easter Gift Ages 3 4 5 6 7 8 9 10 11 12+

Urackify 2 Step Ladder, Heavy-Duty 330lb Capacity, Wide Anti-Slip Steps & Secure Handrail Compact, Folding Step Stool Portable Design for Home, Kitchen, Office, Pantry, Closet Use, Black

Razer BlackShark V2 X Gaming Headset: 50mm Drivers - Cardioid Mic - Memory Foam Cushion - Lightweight- Comfortable, Noise Isolating Earcups - for PC, PS4, PS5, Switch - 3.5mm Audio Jack - Black ECOLOGO

AMVR Facial Interface Compatible with Meta/Oculus Quest 3 Face Pad Accessories, with Soft PU Face Cushion Replacement and Breathable Ice Silk Cotton, Air-Circulation(Not for Quest 3s)

GuaGua Case for iPhone 16 Yellow Liquid Silicone Soft Gel Rubber Slim Thin Microfiber Lining Cushion Texture Cover, Shockproof Protective Anti-Scratch Phone Case for iPhone 16 2024 Yellow

GuaGua Case for iPhone 13 6.1 Inch Liquid Silicone Soft Gel Rubber Slim Thin Microfiber Lining Cushion Texture Cover Shockproof Protective Anti-Scratch Phone Case for iPhone 13 2021 Yellow

Outdoorfun 24 in 1 DIY Screwdriver, 2025 Upgrade Magnetic Screwdriver Set, Multifunctional 24 in 1 Magnetic Ratchet Screwdriver Set Toolbox for Household (1set)

JOREST 38Pcs Small Precision Screwdriver Set, Tool Gifts for Men, Christmas Gifts for him with Torx T5, T6, Repair Tool Kit for MacBook, Computer, Laptop, iPhone, PS4 PS5, Xbox, Switch, Glasses

NIVEA MEN Black & White Invisible Roll-On Antiperspirant Deodorant with 72-Hr Odour, Sweat and Stain Protection, Fresh Scented Men's Deodorant, Non-Sticky, Ethyl Alcohol Free, 50mL

Portable Carpet & Upholstery Spot Cleaner,15Kpa Powerful Suction and Spot Remover, Deep Stain Cleaning for Carpet, Pets, Stairs, Car Seat, Couch, with Dual Size BrushHead and Cleaning Solutions

Ailltopd Portable Carpet & Upholstery Spot Cleaner, Powerful Suction and Spot Remover, Deep Stain Cleaning for Carpet, Pets, Stairs, Car Seat, Couch, with Dual Size BrushHead and Cleaning Solutions




















