Context API React + Typescript | useContext & useReducer Examples
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Learn how to use the Context API with React + Typescript. This tutorial provides examples with useContext, useReducer, and custom React hooks. The React Context API is your first step towards global state management.
🚀 Become a full-stack web dev with Zero To Mastery Courses:
The Complete Web Developer: https://bit.ly/WebDevMaster
Master the Coding Interview: https://bit.ly/FAANGInterview
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
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 All Resources for this Typescript Course: https://github.com/gitdagray/typescri...
🔗 Playlist for this Typescript Course: http://bit.ly/3GcNJ78
Context API React + Typescript | useContext & useReducer Examples
(00:00) Intro
(00:08) Welcome
(00:30) Starter Code
(00:56) Extracting initial state & types
(03:52) useCounterContext hook & type
(08:27) Create Context with initial context state
(11:43) Context Provider
(16:32) useCallback
(18:07) Applying the Provider
(19:40) Custom hooks to deliver context
Corrections:
(12:42) Spreading the ...initState into the Provider parameters is not really necessary. It does help document but really just creates extra boilerplate. You can pull it in from the lexical scope of the Provider since both are defined in the same file. This will also eliminate the need to use the initState in the App component. initState will simply be passed to useCounterContext in the Provider value.
📚 Suggested Pre-requisites for this Typescript course:
🔗JavaScript for Beginners full course: • JavaScript Full Course for Beginners | Com...
📚 React Hooks tutorials:
🔗 useState: • Avoid this React State Mistake | React Pre...
🔗 useEffect: • React useEffect Hook tutorial | Learn ReactJS
🔗 useCallback: • useCallback STOPS this React MISTAKE | use...
🔗 useMemo: • useMemo Explained | React Hooks useMemo Tu...
🔗 useRef: • BUILD a React Timer with useRef | React Ho...
🔗 useReducer: • useReducer is BETTER than useState | React...
🔗 useContext: • State Management in React | Context API us...
📚 Tutorial References:
🔗 TypeScript + React Cheatsheet: https://github.com/typescript-cheatsh...
🔗 React Official Website: https://reactjs.org/
🔗 Typescript Official Website: https://www.typescriptlang.org/
🔗 Anders Hejlsberg, Creator of Typescript and C# Interview: https://dev.to/destrodevshow/typescri...
🔗 Stackoverflow Survey Results: https://survey.stackoverflow.co/2022/...
🔗 MDN - Static Typing: https://developer.mozilla.org/en-US/d...
🔗 MDN - Dynamic Typing: https://developer.mozilla.org/en-US/d...
🔗 MDN - Type Coercion: https://developer.mozilla.org/en-US/d...
🔗 TS Type Assertions: https://www.typescriptlang.org/docs/h...
⚙ Web Dev Tools:
🔗 Vite: https://vitejs.dev/
🔗 Chrome Browser: https://www.google.com/chrome/
🔗 Visual Studio Code (VS Code): https://code.visualstudio.com/
🔗 Node.js & npm: https://nodejs.org/
🔗 Live Server VS Code Extension: https://marketplace.visualstudio.com/...
Was this React Hooks + Typescript useContext / Context API tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#context #react #typescript
On this page of the site you can watch the video online Context API React + Typescript | useContext & useReducer Examples with a duration of hours minute second in good quality, which was uploaded by the user Dave Gray 23 December 2022, share the link with friends and acquaintances, this video has already been watched 29,305 times on youtube and it was liked by 689 viewers. Enjoy your viewing!
