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 ➜ 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/

? All Resources for this Typescript Course: https://github.com/gitdagray/typescript-course

? 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: https://youtu.be/EfAl9bwzVZk

? React Hooks tutorials:
? useState: https://youtu.be/yvTGXH7uybA
? useEffect: https://youtu.be/j3vk0FW71DM
? useCallback: https://youtu.be/FB_kOSHk1DM
? useMemo: https://youtu.be/oR8gUi1LfWY
? useRef: https://youtu.be/s6UAuFzL308
? useReducer: https://youtu.be/26ogBZXeBwc
? useContext: https://youtu.be/ngVvDegsAW8

? Tutorial References:
? TypeScript + React Cheatsheet: https://github.com/typescript-cheatsheets/react
? 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/typescript-and-c-both-created-by-the-same-person-named-anders-hejlsberg-42g4
? Stackoverflow Survey Results: https://survey.stackoverflow.co/2022/#technology-most-popular-technologies
? MDN - Static Typing: https://developer.mozilla.org/en-US/docs/Glossary/Static_typing
? MDN - Dynamic Typing: https://developer.mozilla.org/en-US/docs/Glossary/Dynamic_typing
? MDN - Type Coercion: https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion
? TS Type Assertions: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions

⚙ 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/items?itemName=ritwickdey.LiveServer

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